1.data.json的数据
{
"status":200,
"data":{
"name":"web211001",
"student":[
{"id":10001,"name":"张三"},
{"id":10002,"name":"李四"},
{"id":10003,"name":"王五"}
]
},
"msg":"错误信息"
}
2.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function () { //1创建XMLHttpRequest对象，也就是创建一个异步调用对象 var request=new XMLHttpRequest(); //2.创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息 request.open("get","./00 data.json"); //3) 设置响应 HTTP 请求状态变化的函数 //responseText 回复信息 parse对语法进行分析解析 request.onreadystatechange=function(){ if(request.status===200 && request.readyState===4){//request.readyState 返回当前文档的状态（载入中……） //console.log(request.responseText); 纯文本 //console.log(request.responseXML); //5) 获取异步调用返回的数据 var data=JSON.parse(request.responseText);//转换为json对象 //console.log(data); //6) 使用 JavaScript 和 DOM 实现局部刷新 if(data.status===200){//状态正常 var cls=data.data; document.querySelector("h1").innerText=cls.name; }else{ console.log(data.msg); } } } //4) 发送 HTTP 请求 request.send(); } </script> </head> <h1></h1> <body> </body> </html>
3.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/jquery-3.3.1.min.js"></script> <script> $(function(){ // $.ajax({ // type:"get", //请求方法get为默认 // url:"./00 data.json", //请求路径 // data:{id:1000}, //请求参数 // //data:"id:1000$name=zhangsan",//表单格式 // //contentType:"json",//请求参数的格式 // dataType:"json",//返回数据格式 // success:function(data){ //请求成功 data->json文件的数据 // console.log(data); // if(data.status===200){ // var cls=data.data; // $("legend").text(cls.name); // var students=cls.student; // for(let index=0;index<students.length;index++){ // const stu=students[index]; // $(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>"); // } // }else{ // console.log(msg); // } // }, // error:function(res,err){//请求失败 // console.log(res);//详细错误信息 // //console.log(err);错误返回error // } // }) //url [data] success [dataType] $.get("./00 data.json",function(data){ if(data.status===200){ var cls=data.data; $("legend").text(cls.name); var students=cls.student; for(let index=0;index<students.length;index++){ const stu=students[index]; //把每一个数据都给stu //append()追加 $(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>"); } }else{ console.log(msg); } }) //url [data] success [dataType] //$.post() 和$.get()一样，只是请求方法不一样（post/get） }) </script> </head> <body> <legend></legend> <table class="data"> <thead> <th>id</th> <th>name</th> </thead> <tbody> <!-- <tr></tr> --> </tbody> </table> </body> </html>
