Ajax获取Json多个集合并同时遍历:
方法一.:将多个集合放入MAP集合。
后台:Servlet
@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
NoteService nd = new NoteServiceImpl();
// 以下设定3个集合: // 查询所有文档所有字段内容 List<NoteBean> lnb = nd.queryAll(); // 提取每个文档内容中的第一个图片地址的集合 List<String> imgSrcFirst = nd.contentImgFirst(); // 提取每个文档内容中的纯文本内容的前101字节 List<String> ctTxtHundred = nd.contentTxtHundred();
//将多个集合放入MAP集合 Map map = new HashMap(); map.put("image",imgSrcFirst); map.put("text",ctTxtHundred); map.put("list",lnb); JSONObject jo = JSONObject.fromObject(map); //向ajax中传递数据 resp.getWriter().write(jo.toString()); }
前台:Jquery
$(function () { $.ajax({ url: "noteListUser.do", type: "post", dataType: "json", success: function (data) { console.log("开始获取数据...."); //从map中取出集合 var images=data.image; var lists=data.list; var texts=data.text; /* //分别遍历: $.each(images, function (index, img) { console.log(img); }) $.each(lists, function (index, list) { console.log(list.id); }) $.each(texts, function (index, txt) { console.log(txt); })*/ //同时遍历,前提:所遍历的多个集合的length一致 for(var i=0;i<images.length;i++){ console.log(images[i]+"++"+lists[i].id+"++"+texts[i]); } }, error: function () { console.log("服务器调用失败...."); } }) });
方法二:方法一里的后台多个集合放在了Map集合中,也可以放到对象中,毕竟面向对象编程,但是太麻烦了,需要额外写个bean:
后台:Servlet
@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
NoteService nd = new NoteServiceImpl();
//以下设定3个集合 // 查询所有文档所有字段内容 List<NoteBean> lnb = nd.queryAll(); // 提取每个文档内容中的第一个图片地址的集合 List<String> imgSrcFirst = nd.contentImgFirst(); // 提取每个文档内容中的纯文本内容的前101字节 List<String> ctTxtHundred = nd.contentTxtHundred();
//将多个集合放入TestBean对象 TestBean tb=new TestBean(); tb.setImg(imgSrcFirst); tb.setList(lnb); tb.setTxt(ctTxtHundred); JSONObject jo = JSONObject.fromObject(tb); //向ajax中传递数据 resp.getWriter().write(jo.toString()); }
前台:Jquery
$(function () {
$.ajax({
url: "noteListUser.do",
type: "post",
dataType: "json",
success: function (data) {
console.log("开始获取数据....");
var test=data;
//同时遍历,前提:所遍历的多个对象的length一致
for(var i=0;i<test.img.length;i++){
console.log(test.img[i]+"++"+test.list[i].id+"++"+test.txt[i]);
}
},
error: function () {
console.log("服务器调用失败....");
}
})
});
注:以上两种方法已测试通过..