Jquery解析Json数据
JSP文件
<%@ 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 'listUser.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">
-->
<script language="javascript" src="../js/jquery.js"></script>
<script language="javascript" src="../js/json.js"></script>
<script language="javascript">
function jsonview(){
$.getJSON("/userServlet",null,function call(data){
wirteHtml(data);
});
}
function wirteHtml(data){
////方法一
/*
var continents = data.users;
for(var i=0;i<continents.length;i++){
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].tel;
}
*/
//方法二
var list = data.users;
//alert(list.length);
$.each(list, function(i, u){
var row = $("#template_0").clone();
row.find("#name").text(u.name);
row.find("#age").text(u.age);
row.find("#tel").text(u.tel);
row.find("#address").text(u.address.province+u.address.city+u.address.country);
row.appendTo("#planTable");
});
}
</script>
</head>
<body>
<input type="button" value="JsonView" onClick="jsonview();">
<div id="dateMessage">
<table id="planTable" border="1">
<thead>
<td>Name</td>
<td>Age</td>
<td>Tel</td>
<td>Address</td>
</thead>
<tbody id="template">
<tr id="template_0">
<td id="name"></td>
<td id="age"></td>
<td id="tel"></td>
<td id="address"></td>
</tr>
</tbody>
</table>
</div>
<input type="button" value="Get Xml" onclick="getXml();">
</body>
</html>
Java文件
package com.zj.user.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import com.zj.user.bean.Address;
import com.zj.user.bean.Userinfo;
public class UserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/xml;charset=utf-8");
resp.setHeader("Cache-Control","no-cache");
//跨域
String callback = request.getParameter("callback");
JSONObject json = new JSONObject();
try{
Userinfo user1=new Userinfo();
user1.setAddress(new Address("广东省","广州市","天河区"));
user1.setName("张三");
user1.setTel("13711486870");
user1.setAge(22);
Userinfo user2=new Userinfo();
user2.setAddress(new Address("广西省","南宁市","南区"));
user2.setName("李四");
user2.setTel("13711485470");
user2.setAge(32);
Userinfo user3=new Userinfo();
user3.setAddress(new Address("湖北省","武汉市","洪山区"));
user3.setName("王五");
user3.setTel("1371854786870");
user3.setAge(28);
List list=new ArrayList();
list.add(user1);
list.add(user2);
list.add(user3);
try {
//取集合
JSONArray jsonArray = JSONArray.fromObject(list);
JSONObject jsobjcet = new JSONObject();
jsobjcet.put("users", jsonArray);
response.getWriter().write(callback+"("+jsobjcet.toString()+");");
System.out.println(jsobjcet.toString());
} catch (IOException e) {
e.printStackTrace();
}
}
}
注意
要加入的jar包
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
完整实例请参考附件