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中 ...
随机推荐
- mysql-----04 多表查询
本节主要介绍mysql的多表查询(多表连接查询.复合条件查询.子查询) 一.多表连接查询 #重点:外链接语法 select 字段列表 from 表1 inner|left|right join 表2 ...
- vue加elementui开发的分页显示
由于我的是公共引入样式表和css表所以,将公共的也写出来了(我接手的项目为基于vue开发的) 公共的index.html 引入js <script src="{MODULE_URL}s ...
- 源码安装支持ffmpeg的opencv2
1.首先安装ffmpeg apt-get install ffmpeg 2.安装opencv对ffmeg的依赖 # for Compiling OpenCV with ffmpeg support ...
- 算法练习LeetCode初级算法之数学
Fizz Buzz class Solution { public List<String> fizzBuzz(int n) { List<String> list=new L ...
- 从零开始学spring cloud(三) -------- Eureka简介
1.服务发现组件:Eureka Eureka的开源文档介绍地址:https://github.com/Netflix/eureka/wiki/Eureka-at-a-glance What is Eu ...
- python字符串处理内置方法一览表
python字符串处理内置方法一览表 序号 方法及描述 1 capitalize()将字符串的第一个字符转换为大写 2 center(width, fillchar) 返回一个指定的宽度 widt ...
- 阅读:JAVA 3& 4
随机数: Random rand = new Random(47); // 产生随机算子.47 is seed. for incovating predicatable random numberin ...
- ajax执行成功不进入success方法
当dataType的值为json时,传入的值和返回的值符合json格式的时候,执行成功才会进入success方法,否则进入error方法.
- JAVA多线程之线程间的通信方式
(转发) 收藏 记 周日,北京的天阳光明媚,9月,北京的秋格外肃穆透彻,望望窗外的湛蓝的天,心似透过栏杆,沐浴在这透亮清澈的蓝天里,那朵朵白云如同一朵棉絮,心意畅想....思绪外扬, 鱼和熊掌不可兼得 ...
- storm1.1.0 drpc 部署和调用测试
一.配置集群storm.yaml文件,配置drpc.server 二.部署到linux上,开启nimbus,drpc,supervisor 等服务 /opt/module/storm-1.1.0/bi ...