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>
