<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'MyJsp.jsp' starting page</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script language="text/javascript" src="json.js"></script>
<script type="text/javascript">
function jsonview(){
alert(11);
$.getJSON("http://localhost:8088/JQuery/servlet/DataJson",function(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>
</head>
<body>
<h1>JSON数据显示.</h1>
<input type="button" value="JsonView" οnclick="jsonview()"/>
<div id="dateMessage">
<table id="planTable">
<tr><td>名称</td><td>年龄</td><td>邮箱</td></tr>
</table>
</div>
</body>
</html>
后台:
response.setContentType("text/html;charset=UTF-8");
response.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();
member.put("name", "张小"+i);
member.put("age", "28");
member.put("email", "test@test.com");
((JSONArray) members).put(i, member);
}
json.put("jobs", members);
}catch(Exception e){
e.printStackTrace();
}
System.out.println(json.toString());
response.getWriter().write(json.toString());
<head>
<base href="<%=basePath%>">
<title>My JSP 'MyJsp.jsp' starting page</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script language="text/javascript" src="json.js"></script>
<script type="text/javascript">
function jsonview(){
alert(11);
$.getJSON("http://localhost:8088/JQuery/servlet/DataJson",function(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>
</head>
<body>
<h1>JSON数据显示.</h1>
<input type="button" value="JsonView" οnclick="jsonview()"/>
<div id="dateMessage">
<table id="planTable">
<tr><td>名称</td><td>年龄</td><td>邮箱</td></tr>
</table>
</div>
</body>
</html>
后台:
response.setContentType("text/html;charset=UTF-8");
response.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();
member.put("name", "张小"+i);
member.put("age", "28");
member.put("email", "test@test.com");
((JSONArray) members).put(i, member);
}
json.put("jobs", members);
}catch(Exception e){
e.printStackTrace();
}
System.out.println(json.toString());
response.getWriter().write(json.toString());