zoukankan      html  css  js  c++  java
  • 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("服务器调用失败....");
            }
        })
    });

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

  • 相关阅读:
    前端与算法 leetcode 344. 反转字符串
    JavaScript闭包使用姿势指南
    前端与算法 leetcode 48. 旋转图像
    前端与算法 leetcode 36. 有效的数独
    前端与算法 leetcode 1. 两数之和
    前端与算法 leetcode 283. 移动零
    前端与编译原理 用js去运行js代码 js2run
    前端与算法 leetcode 66. 加一
    前端与算法 leetcode 350. 两个数组的交集 II
    前端与算法 leetcode 26. 删除排序数组中的重复项
  • 原文地址:https://www.cnblogs.com/nreg/p/9853826.html
Copyright © 2011-2022 走看看