11.22
整理代码 shift+alt+f
复制代码一行 ctrl+c+v
ajax创建步骤
1) 创建 XMLHttpRequest 对象, 也就是创建一个异步调用对象
2) 创建一个新的 HTTP 请求, 并指定该 HTTP 请求的方法、URL 及验证信息
3) 设置响应 HTTP 请求状态变化的函数
4) 发送 HTTP 请求
5) 获取异步调用返回的数据
6) 使用 JavaScript 和 DOM 实现局部刷新
ajax json文件
一.原生Ajax
window.onload = function () {
var request = new XMLHttpRequest();// 1) 创建 XMLHttpRequest 对象, 也就是创建一个异步调用对象
request.open("get", "./00data.json"); //2) 创建一个新的 HTTP 请求, 并指定该 HTTP 请求的方法、URL 及验证信息
// 3) 设置响应 HTTP 请求状态变化的函数
request.onreadystatechange = function (res) {
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);
}
} //status是状态码
}
request.send();// 4) 发送 HTTP 请求
}
二.jquery ajax 两个方式
方法一；
<title>Document</title>
<!-- jQuery .ajax -->
<script src="./js/jquery-3.3.1.min(1).js"></script>
<script>
$(function () {
$.ajax({
type: "get",//请求方法
url: "./00data.json",
// data:{id:10001}//请求参数
// data:"id=10001&name=zhangsan"
//contentType:"json",//请求格式 参数格式
dataType: "json", //返回数据格式
success: function (data) {
console.log(data);
if (data.status === 200) {
var cls = data.data;
$(".data legend").text(cls.name);
var students = cls.student;
for (let index = 0; index < students.length; index++) {
const stu = students[index];
// $(".data tbody").html("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>")
$(".data tbody").append("<tr><td>" + stu.id + "</td><td>" + stu.name + "</td></tr>")
}
} else {
console.log(data.msg);
}
},
error: function (res, msg) {
console.log(res);
}
})
})
二.方法二。
$(function () {
$.get("./00data.json",function(data){
if (data.status === 200) {
var cls = data.data;
$(".data legend").text(cls.name);
var students = cls.student;
for (let index = 0; index < students.length; index++) {
const stu = students[index];
// $(".data tbody").html("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>")
$(".data tbody").append("<tr><td>" + stu.id + "</td><td>" + stu.name + "</td></tr>")
}
} else {
console.log(data.msg);
}
})
}）
</script>
</head>
<body>
<legend></legend>
<table class="data">
<thead>
<th>id</th>
<th>name</th>
</thead>
<tbody>
<!-- <tr></tr> -->
</tbody>
</table>
</body>
</html>
浙公网安备 33010602011771号