jquery+json小例子
由有不当之处，还望大家能指出。
直接进入主题，使用jquery发送请求到servlet，返回json字符串，然后在前台解析json并显示
后台servlet的请求处理（需要引入json.jar）：
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONObject;
public class JsonViewServlet extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req,resp);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
resp.setHeader("Cache-Control","no-cache");
JSONObject json = new JSONObject();
try{
JSONArray members = new JSONArray();
for(int i=0;i<10;i++){
JSONObject member = new JSONObject()
.put("name", "张小"+i)
.put("age", "28")
.put("email", "[email protected]");
members.put(i, member);
}
json.put("jobs", members);
}catch(Exception e){
e.printStackTrace();
}
System.out.println(json.toString());
resp.getWriter().write(json.toString());
}
}
通过上面代码，将向页面发送下面字符串：
{"jobs":[
{"age":"28","email":"[email protected]","name":"张小0"},
{"age":"28","email":"[email protected]","name":"张小1"},
{"age":"28","email":"[email protected]","name":"张小2"},
{"age":"28","email":"[email protected]","name":"张小3"},
{"age":"28","email":"[email protected]","name":"张小4"},
{"age":"28","email":"[email protected]","name":"张小5"},
{"age":"28","email":"[email protected]","name":"张小6"},
{"age":"28","email":"[email protected]","name":"张小7"},
{"age":"28","email":"[email protected]","name":"张小8"},
{"age":"28","email":"[email protected]","name":"张小9"}
]}
前台页面（需要引入jquery.js和json.js）：
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<title>使用jquery ajax显示JSON数据</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" src="../jslib/jquery.js"></script>
<script language="javascript" src="../jslib/json.js"></script>
</head>
<body>
<h1>JSON数据显示.</h1>
<input type="button" value="JsonView" onClick="jsonview();">
<div id="dateMessage">
<table id="planTable">
<tr><td>名称</td><td>年龄</td><td>邮箱</td></tr>
</table>
</div>
</body>
</html>
<script language="javascript">
function jsonview(){
$.getJSON("http://localhost:8080/ajaxServlet/servlet/jsonViewServlet",null,function call(data){
wirteHtml(data);
});}
function wirteHtml(data){
//alert(data.toJSONString());
//alert(data.jobs);//返回的data就是一个JSON的对象
var continents = data.jobs;
for(var i=0;i<continents.length;i++){
//alert(continents[i].name);
var newLine = $("#planTable").length;
var row = planTable.insertRow(newLine);
var col = row.insertCell(0);
col.innerHTML = continents[i].name;
col = row.insertCell(1);
col.innerHTML = continents[i].age;
col = row.insertCell(2);
col.innerHTML = continents[i].email;
}
}
</script>
WEB.XML配置
<!-- jsonView servlet -->
<servlet>
<servlet-name>jsonViewServlet</servlet-name>
<servlet-class>com.arthurs.json.JsonViewServlet</servlet-class>
</servlet>
<!-- jsonView mapping -->
<servlet-mapping>
<servlet-name>jsonViewServlet</servlet-name>
<url-pattern>/servlet/jsonViewServlet</url-pattern>
</servlet-mapping>
文中用到的jquery.js和json.js在附件中