Ajax获取Json多个集合并同时遍历
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多个集合并同时遍历的更多相关文章
- Ajax获取 Json文件提取数据
摘自 Ajax获取 Json文件提取数据 1. json文件内容(item.json) [ { "name":"张国立", "sex":&q ...
- qt qml ajax 获取 json 天气数据示例
依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...
- ajax获取json对象
ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
- ajax获取json数据及实现跨域请求
最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...
- JS-利用ajax获取json数据,并传入页面生成动态tab
封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...
- AngularJS学习笔记(3)——通过Ajax获取JSON数据
通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
- jQuery中使用Ajax获取JSON格式数据示例代码
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...
随机推荐
- 异步FIFO的verilog实现与简单验证(调试成功)
最近在写一个异步FIFO的时候,从网上找了许多资料,文章都写的相当不错,只是附在后面的代码都多多少少有些小错误. 于是自己写了一个调试成功的代码,放上来供大家参考. 非原创 原理参考下面: 原文 ht ...
- Python CGI编程
CGI(Common Gateway Interface)通用网关接口,它是一段程序,运行在服务器上.如:HTTP服务器,提供同客户端HTML页面的接口. CGI程序可以是python脚本,PERL脚 ...
- 算法练习LeetCode初级算法之其他
位1的个数 解法一: class Solution { // you need to treat n as an unsigned value public int hammingWeight(int ...
- LINUX中printf与echo的区别
(1)首先echo是回显,即代表回车显示,是自带换行的:而printf只是打印出来,没有换行(2)echo只是回显没有变量替换功能:printf是有的举例:假如我们定义好变量a='hello worl ...
- g++ 学习笔记
gcc and g++分别是GNU的c & c++编译器.gcc/g++在执行编译的时候一般有下面4步: 1 预处理,生成.i的文件. 命令如下:g++ -E test.cpp 此命令只进行 ...
- Windows PowerShell基本语法及常用命令
PowerShell常用命令: 一 Get类 1.Get-Command : 得到所有PowerShell命令,获取有关 cmdlet 以及有关 Windows PowerShell 命令的其他元素的 ...
- P1439 最长公共子序列(nlognLCS问题)
模板 #include <iostream> #include <cstdio> using namespace std; ],loc[],b[],k,n,l,r,mid; i ...
- 设计模式学习心得<外观模式 Facade>
外观模式(Facade Pattern)隐藏系统的复杂性,并向客户端提供了一个客户端可以访问系统的接口.这种类型的设计模式属于结构型模式,它向现有的系统添加一个接口,来隐藏系统的复杂性. 这种模式涉及 ...
- VS 2017显示“高级保存选项”命令操作方法
Visual Studio提供“高级保存选项”功能,它能指定特定代码文件的编码规范和行尾所使用的换行符.在Visual Studio 2017中,该命令默认是没有显示在“文件”菜单中的.用户需要手工设 ...
- 【NIFI】 Apache NiFI 授权配置
当NIFI未配置需要单向SSL(例如LDAP,OpenId Connect等)的替代认证机制时,NiFi的Web服务器将要求访问用户界面的用户使用基于证书的客户端身份验证.启用备用身份验证机制会将We ...