<%@ 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 'index.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="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/ext.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<style type="text/css">
td{
text-align:center;
color:#333333;
font-size:12px;
}
th{
color:#aaaaaa;
font-size:13px;
}
</style>
</head>
<script type="text/javascript" language="javascript">
function getXMLHttpRequest(){
var xhr;
try{
xhr=new XMLHttpRequest();
}catch(err1){
try{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}catch(err2){
alert("您的浏览器不支持ajax");
}
}
return xhr;
}
function $(id){
return document.getElementById(id);
}
function saxJson(){
var xhr=getXMLHttpRequest();
xhr.open("GET","json.jsp",true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200) {
alert(xhr.responseText);
var stus=eval("("+xhr.responseText+")");
var tby=$("tby");
// var tby=document.getElementById("tby");
for(var i=0;i<stus.length;i++){
var tr=document.createElement("tr");
var ntd=document.createElement("td");
var std=document.createElement("td");
var atd=document.createElement("td");
var etd=document.createElement("td");
ntd.innerHTML=stus[i].name;
alert("ntd.innerHTML:"+ntd.innerHTML);
std.innerHTML=stus[i].sex;
atd.innerHTML=stus[i].age;
etd.innerHTML=stus[i].email;
tr.appendChild(ntd);
tr.appendChild(std);
tr.appendChild(atd);
tr.appendChild(etd);
tby.appendChild(tr);
}
}
}
}
</script>
<body onload="saxJson();">
<h2 align="center" style="color:#666666;" >js解析json案例</h2>
<div id="display" align="center">
<table style="border-collapse:collapse" cellspacing="0"
cellpadding="3" id="tb1" border="1" width="360">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody id="tby">
</tbody>
</table>
</div>
<br>
<div align="center" style="font-size:12px;color:#333333">
来自于Copyright©CSDN Corporation 2010-2011 孔雀王子and liuchao 修改
</div>
</body>
</html>
json.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
student=[
{
name:"liuchao",
sex:"boy",
age:25,
email:"1074213947@qq.com"
},
{
name:"liuchao2",
sex:"boy2",
age:23,
email:"1074213947@qq.com"
},
{
name:"liuchao3",
sex:"boy3",
age:20,
email:"1074213947@qq.com"
}
]
[img]http://dl2.iteye.com/upload/attachment/0095/3466/4c0fd3b0-8923-3e88-9b60-46707b88710b.png[/img]