您的位置：首页 > Web前端 > JavaScript

Json简单实例

2015-11-26 11:33 661 查看

1.html:

<!DOCTYPE html>
<html>
<head>
<title>show2.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="js/student2.js"></script>
</head>

<body>
<input type="button" onclick="Student2()" value="获取信息">

<table border="1px" width="80%" align="center">
<thead><tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
</tr></thead>
<tbody id="main" align="center">

</tbody>
</table>
</body>
</html>

2.js

//浏览器协议
var xmlHttp;
function creatXMLHttpRequest(){
if(window.xmlHttpRequest){
xmlHttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttp=new XMLHttpRequest("Microsoft,XMLHTTP");
}
}
//触发函数
function Student2(){
alert("aa");
//建立异步请求对象
creatXMLHttpRequest();
//开启对服务器端的连接
xmlHttp.open("post","student2.txt",true);
//向浏览器发送请求
xmlHttp.send();
//调用回调函数
xmlHttp.onreadystatechange=getStudent2;

}
function getStudent2(){

//判断请求状态
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//服务器传来的响应
var msg=xmlHttp.responseText;
var stus=eval("("+msg+")");
tbody=document.getElementById("main");
for(var i=0;i<stus.length;i++){
var stuNo=stus[i].stuNo;
var name=stus[i].name;
var age=stus[i].age;
var address=stus[i].address;

tr=document.createElement("tr");

td1=document.createElement("td");
td1.innerHTML=stuNo;

tr.appendChild(td1);

td2=document.createElement("td");
td2.innerHTML=name;
tr.appendChild(td2);

td3=document.createElement("td");
td3.innerHTML=age;
tr.appendChild(td3);

td4=document.createElement("td");
td4.innerHTML=address;
tr.appendChild(td4);

tbody.appendChild(tr);

}
}
}

3.txt

[
{"stuNo":"001","name":"jack","age":23,"address":"beijing"},
{"stuNo":"002","name":"bob","age":24,"address":"shanghai"},
{"stuNo":"003","name":"mary","age":26,"address":"anerick"},
{"stuNo":"004","name":"kity","age":26,"address":"hongkong"}
]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航