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("服务器调用失败....");
}
})
});

注:以上两种方法已测试通过..

Ajax获取Json多个集合并同时遍历的更多相关文章

  1. Ajax获取 Json文件提取数据

    摘自 Ajax获取 Json文件提取数据 1. json文件内容(item.json) [ { "name":"张国立", "sex":&q ...

  2. qt qml ajax 获取 json 天气数据示例

    依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...

  3. ajax获取json对象

    ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...

  4. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  5. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  6. ajax获取json数据及实现跨域请求

    最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...

  7. JS-利用ajax获取json数据,并传入页面生成动态tab

    封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...

  8. AngularJS学习笔记(3)——通过Ajax获取JSON数据

    通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...

  9. jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

随机推荐

  1. Django继承AbstractUser新建UserInfor Model时出现fields.E304错误

    错误详情: SystemCheckError: System check identified some issues: ERRORS:app01.UserInfo.groups: (fields.E ...

  2. SQL语句 拆分某些字段,一行变多行

    原文链接:http://bbs.csdn.net/topics/310219852 ------------------------------------- -- Author : liangCK ...

  3. poj2777(线段树)

    题目链接:https://vjudge.net/problem/POJ-2777 题意:有L块连续的板子,每块板子最多染一种颜色,有T种(<=30)颜色,刚开始将所有板子染成颜色1,O次操作(包 ...

  4. jqgrid点击搜索无法重置参数问题

    var searchClick=false;//判断是否是第一次点击搜索 //当搜索按钮被单击时触发 function searchData(){ //创建jqGrid组件 console.log(' ...

  5. commandjs、AMD、CMD之间的故事

    commandjs:同步加载,只运行一次,后面使用第一次加载时运行的结果(存于缓存中),用于服务器 AMD:define(id ?,dependencies ?,factory) 异步加载,用于浏览器 ...

  6. leetcode8:字符串转整数 (atoi)

    实现 atoi,将字符串转为整数. 在找到第一个非空字符之前,需要移除掉字符串中的空格字符.如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连续的数字组合起来,这部分字符即为整数的值 ...

  7. css设置文本自动换行

    .wrap-90 { display: inline-block; word-wrap: break-word;//对块级元素设置此属性 width: 90px;}

  8. java学习(四)

    学号 20189214 <Java程序设计>第四周学习总结 教材学习内容总结 枚举 枚举是JDK1.5版本新增的特性(泛型.For-each等如今被广泛应用的特性也是由JDK1.5时所新增 ...

  9. python 练习4

    题目为信用卡消费管理系统: 主程序:main.py #!usr/bin/env python # encoding: utf-8 import conf,sys,time,re,os import j ...

  10. [C#.net]SqlDataAdapter 执行超时已过期 完成操作之前已超时或服务器未响应

    随着数据库数据的不断增大,查询时间也随之增长.而客户端与数据库连接时间以及命令的执行时间都是有限的.默认为30s.所以在查询数据的时候,程序会出现 “超时时间已到.在操作完成之前超时时间已过或服务器未 ...