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中 ...
随机推荐
- Java虚拟机运行时数据区域及垃圾回收算法
程序计数器 记录正在执行的虚拟机字节码指令的地址(如果正在执行的是本地方法则为空). Java 虚拟机栈 每个 Java 方法在执行的同时会创建一个栈帧用于存储局部变量表.操作数栈.动态链接.方法出口 ...
- C# 微信网页授权多域名解决
在做微信开发的时候,会遇到这样的场景:一个公众号,会有多个业务:官网.论坛.商城等等 微信网页授权域名 目前最多可以填写两个!!!,那么问题来了?这应该怎么办? 答案就是: 做一个中转服务! 域名1: ...
- JSP数据库插入判断
- Hillstone基础上网配置
1.接口配置 1)进入设备管理界面后,点击左边 网络—接口: 2)选择相应的接口,点击编辑: 3)在接口配置界面中,选择接口的安全域类型(三层接口即为三层安全域,二层接口即为二层安全域).安全域名称 ...
- swift UIview上添加视频播放
1. /// 是否显示过广告 private lazy var isLoadAV = false /// 15秒宣传视频 private var play: AVPlayer? /// 宣传视频背景 ...
- 20165315 2018-2019-2 《网络对抗技术》Exp1 PC平台逆向破解
20165315 2018-2019-2 <网络对抗技术>Exp1 PC平台逆向破解 一.实验内容 本次实践的对象是一个名为pwn1的linux可执行文件.该程序正常执行流程是:main调 ...
- c#Dapper mysql按时间段查询和过滤
#endregion /// <summary> /// 根据条件获取集合 /// </summary> /// <param name="id"&g ...
- es5的语法学习
1. strict模式 严格模式,限制一些用法,'use strict'; 2. Array增加方法 增加了every.some .forEach.filter .indexOf.lastIndexO ...
- 【aardio】是否取消三个按键的对话框
import win; var id = win.msgbox("三个按钮","标题",0x3/*_MB_YESNOCANCEL*/) 参考标准库函数: nam ...
- Angular实现动态添加删除表单输入框功能
<div class="form-group form-group-sm" *ngFor="let i of login"> <label c ...