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("服务器调用失败....");
            }
        })
    });

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

  • 相关阅读:
    【腾讯Bugly干货分享】微信Tinker的一切都在这里,包括源码(一)
    【腾讯Bugly干货分享】iOS10 SiriKit QQ适配详解
    【腾讯Bugly干货分享】安卓单元测试:What, Why and How
    【腾讯Bugly干货分享】Android Linker 与 SO 加壳技术
    【腾讯优测干货分享】Android内存泄漏的简单检查与分析方法
    【腾讯Bugly经验分享】程序员的成长离不开哪些软技能?
    【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
    从零开始安装Hadoop视频教程
    如何在MAC机器中实现移动设备WiFI上网(没有专门的无线路由器的情况)
    Alfresco安装与配置图解
  • 原文地址:https://www.cnblogs.com/nreg/p/9853826.html
Copyright © 2011-2022 走看看