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("服務器調用失敗....");
        }
    })
});

 

注：以上兩種方法已測試通過..