MongoDB 更新文件
整理程式碼 shift+alt+f
複製程式碼一行 ctrl+c+v
ajax建立步驟
1) 建立 XMLHttpRequest 物件, 也就是建立一個非同步呼叫物件
2) 建立一個新的 HTTP 請求, 並指定該 HTTP 請求的方法、URL 及驗證資訊
3) 設定響應 HTTP 請求狀態變化的函式
4) 傳送 HTTP 請求
5) 獲取非同步呼叫返回的資料
6) 使用 JavaScript 和 DOM 實現區域性重新整理
ajax json檔案
{ "status": 200, "data": { "name": "web班",一.原生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>