描述：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>