Ajax的两种写法
先写一串数据
1 { 2 "status": 200, 3 "data": { 4 "name": "web211001", 5 "student": [ 6 { 7 "id": 10001, 8 "name": "张三" 9 }, 10 { 11 "id": 10001, 12 "name": "李四" 13 }, 14 { 15 "id": 10001, 16 "name": "王五" 17 } 18 ] 19 }, 20 "msg": "错误信息" 21 }
用原生的Ajax输出数据：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <script> 9 //创建步骤 10 window.onload = function () { 11 // 1) 创建 XMLHttpRequest 对象, 也就是创建一个异步调用对象 12 var request = new XMLHttpRequest(); 13 // 2) 创建一个新的 HTTP 请求, 并指定该 HTTP 请求的方法、URL 及验证信息 14 request.open("get", "./data.json"); 15 // 3) 设置响应 HTTP 请求状态变化的函数 16 request.onreadystatechange = function () { 17 if (request.status === 200 && request.readyState === 4) { 18 //console.log(request.responseText)//获取纯文本 19 // console.log(request.responseXML) 20 // 5) 获取异步调用返回的数据 21 var data =JSON.parse(request.responseText); 22 // console.log(data); 23 // 6) 使用 JavaScript 和 DOM 实现局部刷新 24 if (data.status===200) { 25 var cls =data.data; 26 document.querySelector("h1").innerText=cls.name; 27 }else{ 28 console.log(data.msg); 29 30 } 31 } 32 } 33 request.send(); 34 // 4) 发送 HTTP 请求 35 } 36 </script> 37 </head> 38 39 <body> 40 <h1></h1> 41 </body> 42 43 </html>
然后用jQuery请求：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <script src="./js/jquery-3.3.1.min.js"></script> 9 <script> 10 $(function () { 11 // $.ajax({ 12 // method: "get", 13 // url: "./data.json", 14 // // data: { id: 10001 },//请求参数 15 // // data:"id=10001&name=zhangsan",application/x-www-form-urlencoded 16 // contentType: "json",//请求格式 参数的格式 17 // //dataType: "text",//返回数据格式 18 // success: function (data) { 19 // console.log(data); 20 // if (data.status === 200) { 21 // var cls = data.data; 22 // $("legend").text(cls.name); 23 // var students = cls.student; 24 // for (let index = 0; index < students.length; index++) { 25 // const stu = students[index]; 26 // $(".data tbody").append("<tr><td>" + stu.id + "</td><td>" + stu.name + "</td></tr>"); 27 // } 28 // } else { 29 // console.log(data.msg); 30 // } 31 // }, 32 // error: function (res) { 33 // console.log(res); 34 35 // } 36 // }), 37 $.get("./data.json",function(data){ 38 if (data.status === 200) { 39 var cls = data.data; 40 $("legend").text(cls.name); 41 var students = cls.student; 42 for (let index = 0; index < students.length; index++) { 43 const stu = students[index]; 44 $(".data tbody").append("<tr><td>" + stu.id + "</td><td>" + stu.name + "</td></tr>"); 45 } 46 } else { 47 console.log(data.msg); 48 } 49 }) 50 }) 51 //.$post(); 52 </script> 53 </head> 54 55 <body> 56 <legend></legend> 57 <table class="data"> 58 <thead> 59 <th>id</th> 60 <th>name</th> 61 </thead> 62 <tbody> 63 64 </tbody> 65 </table> 66 </body> 67 68 </html>
