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中 ...
随机推荐
- 破损的键盘 (Broken Keyboard)--又名悲剧文本(线性表)
题目: 你有一个破损的键盘.键盘上的所有键都可以正常工作,但有时Home键或者End键会自 动按下.你并不知道键盘存在这一问题,而是专心地打稿子,甚至连显示器都没打开.当你 打开显示器之后, 展现在 ...
- 第三篇 Flask 中的 request
第三篇 Flask 中的 request 每个框架中都有处理请求的机制(request),但是每个框架的处理方式和机制是不同的 为了了解Flask的request中都有什么东西,首先我们要写一个前 ...
- npm 离线安装依赖
现实场景:一台自己的电脑可以连外网,一台开发机不能连网,开发机需要安装node_modules 依赖解决办法: npm 安装依赖分为两种,一是 -g 这种是安装在全局环境的,只有在电脑中 ...
- iTerm2使用技巧
iTerm2实用技巧 搜索及文本复制 使用“cmd+f”可以调出搜索框进行文本搜索,然后有个很奇妙的快捷键“tab”键,使用它后会自动高亮当前文本后面的内容.最后按enter键将高亮文本复制到剪切板上 ...
- 创建表结构的sql语句
1.创建表结构 表名: ODS_PSP_DIS_DAY_CALC create table ODS_PSP_DIS_DAY_CALC ( ID CHAR(32) NOT NULL, DIS ...
- Win10下windows mobile设备中心连接不上的方法无法启动
微软Win10自动更细补丁后windows mobile设备中心就无法启动了 需要重新启动相关的服务并授予 本机登录用户 权限 1.点击屏幕左下角“开始”图标,点击“运行”,在弹出的输入框中输入“se ...
- Qt5.12.2开发Android环境搭建
Qt-Android开发环境概要qt-opensource-windows-x86-5.12.2----armv7jdk-8u201-windows-x64android-ndk-r18b-windo ...
- Saliency Detection: A Spectral Residual Approach
Saliency Detection: A Spectral Residual Approach 题目:Saliency Detection: A Spectral Residual Approach ...
- Linux sleep 语句以及循环 测试负载
sleep 命令 sleep 1 睡眠1秒sleep 1s 睡眠1秒sleep 1m 睡眠1分sleep 1h 睡眠1小时 总代码 #!/bin/bash for i in {1. ...
- (转)Java Web(一) Servlet详解!!
https://www.cnblogs.com/whgk/p/6399262.html 这篇文章到上一篇,距离的有点遥远呀,隔了大概有两个月把,中间在家过了个年,哈哈~ 现在重新开始拾起,最近在看一本 ...