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"}
]
时间: 2024-10-31 22:21:21