jquery獲取JSON並動態建立標籤顯示JSON內容
後臺程式碼：
test.java
protected ModelAndView handle(HttpServletRequest request, HttpServletResponse response) throws Exception {
JSONArray array = new JSONArray();
for(int i = 0; i < 10; i++){
JSONObject json = new JSONObject();
json.put("name", "哇哈哈");
json.put("age", 13);
json.put("sex", "男");
array.add(json);
}
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(array.toJSONString());
response.getWriter().flush();
return null;
}
此處的後臺程式碼使用的是springmvc，也可通過struts2或servlet獲取json
前臺程式碼：
<body>
<input type="submit" id="button" value="確定">
<table class="bbb">
</table>
</body>
jquery 程式碼：
$("document").ready(function(){
$("#button").click(function(){
var sendData = {"method":"json"};
var url = "mainFrameRight.do";
$.getJSON(url,sendData,function(backData){
for(i = 0;i < backData.length; i++){
var tr = $("<tr></tr>");
tr.appendTo($(".bbb"));
var td1 = $("<td>"+backData[i].name+"</td>");
td1.appendTo(tr);
var td2 = $("<td>"+backData[i].age+"</td>");
td2.appendTo(tr);
var td3 = $("<td>"+backData[i].sex+"</td>");
td3.appendTo(tr);
}
});
});
});
通過jquery的getJSON()方法獲取後臺JSON。建立一個tr，並將tr新增到table中(table通過$(".bbb"))獲得。然後建立三個td，並填充資料，新增到tr標籤中。這樣就將JSON內容填充到table中顯示了。這裡可以做一些css的優化。