描述：jQuery ajax處理服務端返回的json數據，這里主要說明的是對象數據，即目標 是對象。
首先是后台的處理過程。本例子為了方便采用servlet來作為服務端。
聲明一個enty類.User.java代碼如下：
package enty; public class User { private int id; private String name; public User(){ } public User(int id,String name){ this.id = id; this.name = name; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
EntyToJson.java的主要代碼如下：
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/json"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); User user1 = new User(1, "wkl"); User user2 = new User(2, "wkl"); User user3 = new User(3, "wkl"); User user4 = new User(4, "wkl"); //定義一個集合list用來存放user對象 List<User> users = new ArrayList<User>(); users.add(user1); users.add(user2); users.add(user3); users.add(user4); //集合要調用json對象數組JSONArray類 JSONArray jsonObject = JSONArray.fromObject(users); //單個對象要調用jsonobject類 JSONObject jsonObject2 = JSONObject.fromObject(user1); out.println(jsonObject.toString()); //out.println(jsonObject2.toString()); }
這里需要注意單個對象和集合，轉換它們為json對象是用不同的類來處理的。
前端頁面代碼。主要的功能描述就是，當點擊“加載對象列表”按鈕時，把后台的數據load到表格中。具體代碼如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'enty_json.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <!-- 引入jquery --> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.9.1.js"></script> <script type="text/javascript"> function loadUsers(){ $.ajax({ url: "EntyToJson", type:"post", // data:"name="+$('#name')[0].value+"&password=123",//向后台傳送的數據格式 dataType:"json",
// 成功返回時需要注意：如果返回的是單個json對象，就不要加上each這個函數，直接data.id,data.value就行了。如果返回的是json對象數組，哪怕只有一個對象在里面，也是需要遍歷的
//即加上each這個函數，取值為value.id、value.name.value代表的是當前的json對象. success: function(data, textStatus){ alert(textStatus); $.each(data,function(n,value){ var str = "<tr><td>"+value.id+"</td><td>"+value.name+"</td></tr>"; $("#userList").append(str); }); }, error:function(XMLHttpRequest, textStatus, errorThrown){ alert(textStatus); } }); } </script> </head> <body> <input type="button" id="btn" onClick="loadUsers()" value="加載對象列表"> <center> <div>對象列表</div> <table id="userList"> <tr><td>ID</td><td>姓名</td></tr> </table> </center> </body> </html>