data.json:
{ "status": 200, "data": { "name": "Web212001", "student": [ { "id": 10001, "name": "张三" }, { "id": 10002, "name": "李四" }, { "id": 10003, "name": "王二" } ] }, "msg": "错误信息" } 原生axjx: <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> 样式： <style> h1{ color: aqua; font-size: 100px; } </style> <script> window.onload = function () { // 1) 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象 var request = new XMLHttpRequest(); // 2) 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息 request.open("get", "./00 data.json"); // 3) 设置响应 HTTP 请求状态变化的函数 request.onreadystatechange = function () { if (request.status === 200 && request.readyState === 4) // console.log(request.responseText); // console.log(request.responseXML); // 5) 获取异步调用返回的数据 var data = JSON.parse(request.responseText); 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>
<body> <h1></h1> </body>
</html> JQuery: <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <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", // // type:返回内容格式，xml, html, script, json, text, _default // // method: "get", // // method:请求方法 // url: "./00 data.json", // // url:一个用来包含发送请求的URL字符串。 // // data: {id: 10001},// 请求参数 // // data:"id= 10001&name=wangwu", application/x-www-form-urlencoded// 表单格式 // // contentType:"json", // 请求格式 参数的格式 // dataType: "json",// 返回数据格式 // success: function (data) { // // success: 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。 // 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) { // // error: 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话） // console.log(res); // } // })
// 简单方法： // 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]; $(".data tbody").append("<tr><td>" + stu.id + "</td><td>" + stu.name + "</td></tr>"); } } else { console.log(data.msg); } })
// url [data] success [dataType]: // $.post()
}) </script> </head>
<body> <legend></legend> <table class="data"> <thead> <th>id</th> <th>name</th> </thead> <tbody> <!-- <tr></tr> --> </tbody> </table> </body>
</html>