描述：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>
时间： 2024-08-26 02:03:18