上篇部落格論述了，資料庫查詢資料返回前台JSP。部落格中主要使用Ajax調用來顯示JSON串，來擷取其中某一個欄位，賦給介面中的某一個控制項。
那這篇部落格中，我們講解，把後台List傳遞JSP展示。
List傳遞介面，以前我們普通的做法是怎麼樣的呢。foreach 的el運算式。還是java代碼。
那對於本身就是Json格式的list，到底如何顯示呢。
顯然表單中的el表單以及java代碼不合適。那我們繼續使用Ajax來顯示。
一：對於不使用前台架構的情況：就是咱們普通的table，到底如何以表格的形式顯示list呢。
OK，方案如下：動態產生表格。
js代碼如下：demo中使用某個按鈕觸發，當然可以在body初始化$(function(){//動態產生表格});各自所需哈。
我把table嵌套在div中：
<body><input type="button" value="用ajax測試具體資料" onclick="testajax()" /><div id="testtable"></div> </body>testajax() js如下：
function testajax() {var _url = "http://localhost:8080/testmongodb/mongodb/";jQuery.ajax({url : _url,type : "get",dataType : "json",success : function(d) { alert(JSON.stringify(d)); //動態產生table var mongotable=$("<table border=\"1\"></table>"); mongotable.appendTo("#testtable"); for(var o in d){//產生tr,添加到table中var tr=$("<tr></tr>"); tr.appendTo(mongotable);//產生tdvar td_id=$("<td width=\"150\">"+d[o].id+"</td>");var td_name=$("<td width=\"150\">"+d[o].name+"</td>");var td_city=$("<td width=\"150\">"+d[o].address.city+"</td>");var td_code=$("<td width=\"150\">"+d[o].address.code+"</td>");//把td添加到tr中td_id.appendTo(tr);td_name.appendTo(tr);td_city.appendTo(tr);td_code.appendTo(tr);}alert($("#testtable").html());}});} 至於樣式，大家可以根據自己需求在js添加哈。
背景list如下：
[{ "_id" : { "$oid" : "52564aa6b16b9c6f728c0cf8"} , "id" : 1 , "name" : "小明" , "address" : { "city" : "beijing" , "code" : "065000"}}, { "_id" : { "$oid" : "52566683b16be14866e9bdc5"} , "id" : 2 , "name" : "小紅" , "address" : { "city" : "beijing" , "code" : "065000"}}] 頁面如下：
二：使用前台架構：舉例，ligerui中的grid展示：（前提：把js、css已經引入）
grid代碼如下：
$(function() { $("#test").ligerGrid({ columns:[ {display:'id',name:'id',width:'200'},{display:'名稱',name:'name',width:'200'},{display:'城市',name:'address.city',width:'250'},{display:'郵編',name:'address.code',width:'250'}], rownumbers : true, width:'80%', height:'150', url:'http://localhost:8080/testmongodb/mongodb/' });});
其中的test是div的id：
<body><input type="button" value="用ajax測試具體資料" onclick="testajax()" /><!-- 測試grid，多行資料 --><div id="test"></div> </body>但是你會發現，即使後台顯示資料，但是grid竟然無法顯示。為啥呢。
那肯定是grid顯示資料來源格式與給出的json的list格式不匹配。
這是ligerui中grid的特有的，看相應的api會發現，grid的資料來源data預設的資料格式，是{Rows:[]}
但是咱們背景List格式如下：
[{ "_id" : { "$oid" : "52564aa6b16b9c6f728c0cf8"} , "id" : 1 , "name" : "小明" , "address" : { "city" : "beijing" , "code" : "065000"}}, { "_id" : { "$oid" : "52566683b16be14866e9bdc5"} , "id" : 2 , "name" : "小紅" , "address" : { "city" : "beijing" , "code" : "065000"}}] 那隻要在前面加上Rows:即可，在js類比此data
var data={Rows:[{"_id":{"inc":1921780984,"machine":-1318347665,"new":false,"time":1381386918000,"timeSecond":1381386918},"id":1,"name":"小明","address":{"city":"beijing","code":"065000"}},{"_id":{"inc":1726594501,"machine":-1318330040,"new":false,"time":1381394051000,"timeSecond":1381394051},"id":2,"name":"小紅","address":{"city":"beijing","code":"065000"}}]}$(function() { $("#test").ligerGrid({ columns:[ {display:'id',name:'id',width:'200'},{display:'名稱',name:'name',width:'200'},{display:'城市',name:'address.city',width:'250'},{display:'郵編',name:'address.code',width:'250'}], rownumbers : true, width:'80%', height:'150', data:data// url:'http://localhost:8080/testmongodb/mongodb/' });}); 結果如下：
當然可以擷取data，然後在此基礎上拼串{Rows:[]}
當然也可以在返回前台Response中，拼接Rows
package com.mongo.servlet;import java.io.IOException;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import com.mongo.dao.EntityTest;public class EntityServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {System.out.println("doget.....");try {List list=new EntityTest().selectAll(); response.setCharacterEncoding("UTF-8"); //主要用於ligerui的grid形式，預設是rowsinitJsonList(request,response,list);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {// TODO Auto-generated method stubdoGet(req, resp);}protected void initJsonList(HttpServletRequest request,HttpServletResponse response, List list) {Map map = new HashMap();map.put("Rows", list);JSONObject jsonObject = JSONObject.fromObject(map);try {response.setCharacterEncoding("utf-8");response.getWriter().write(jsonObject.toString());System.out.println(jsonObject);} catch (IOException e) {System.out.println(e.toString());}}}
使用JSONObject對象進行轉化。
對於其他非ligerui的展示，其實不必使用JSONObject或JSONArray進行轉換，因為本身就是JSON格式。
當然轉換也是沒有壞處的，只不過轉化後格式所有不同而已，但是不影響，因為使用者的屬性是不會改變的，影響的是mogodb中特有的_id的屬性。
{"Rows":[{"_id":{"inc":1921780984,"machine":-1318347665,"new":false,"time":1381386918000,"timeSecond":1381386918},"id":1,"name":"小明","address":{"city":"beijing","code":"065000"}},{"_id":{"inc":1726594501,"machine":-1318330040,"new":false,"time":1381394051000,"timeSecond":1381394051},"id":2,"name":"小紅","address":{"city":"beijing","code":"065000"}}]} OK，到此為止，某一個欄位以及表格形式的準系統實現方式已經敘述。
這兩篇部落格的項目，是用一個項目，只不過各種方式示範，通過注釋來完成。
在此提示：若非ligerui，直接使用數組形式而已[],不要使用Rows:[]格式。但是對於其他的架構，比如ext，easyui，他們都有自己的資料來源格式，但是肯定的是，後台依然是JSON串。
項目Demo，點我下載
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
