首先先寫一個json檔案宣告內容 {

// 先判斷是否是200
// 獲取資料
// 返回資料

"status":200, "data":{ "name":"Web", "student":[ {"id":1001,"name":"張三"}, {"id":1002,"name":"李四"}, {"id":1003,"name":"王五"} ] }, "msg":"錯誤資訊" } 第一個為原生的方法 <script> $(function(){ //原生的Ajax // $.ajax({ // type:"get", // //請求的地址 // url:"./data.json", // // data:{id:1001},//請求引數 // //data:"id=1001&name=zhangsan",//請求引數application/x-www-form-urlencoded // //contentType:"json",//請求引數的格式 // dataType:"json",//返回資料形式 // //成功時執行 // success:function (data){ // 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(data.msg); // } // }, // error:function(res){ // console.log(res); // } // }) }) 還可以用另一種方法： <script> $(function(){ $.get("./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]; $(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>"); } }else{ console.log(data.msg); } }) //url [data] success [dataType] //$.post() }) 最後顯示內容 body的內容： <legend></legend> <table class="data"> <thead> <td>id</td> <td>name</td> </thead> <tbody> <!-- <tr></tr> --> </tbody> </table> <legend></legend> <table class="data"> <thead> <td>id</td> <td>name</td> </thead> <tbody> <!-- <tr></tr> --> </tbody> </table>