41 lines
1.2 KiB
HTML
41 lines
1.2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<meta name="author" content="flykhan" />
|
|||
|
|
<meta name="keywords" content="c c++ 物联网" />
|
|||
|
|
<title>AJAX的异步请求</title>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="ret"></div>
|
|||
|
|
<script>
|
|||
|
|
window.onload = function () {
|
|||
|
|
// 当页面加载完成后，则执行的程序
|
|||
|
|
// 发起异步请求(HTTP)：
|
|||
|
|
// 1) 请求方法
|
|||
|
|
// 2) 请求头和请求体的数据怎么放
|
|||
|
|
// 3) 相应的数据的怎么接
|
|||
|
|
let url = "/cgi-bin/data1.cgi";
|
|||
|
|
// 发起get请求，为了查询数据（从后端获取数据）
|
|||
|
|
fetch(url)
|
|||
|
|
.then((resp) => {
|
|||
|
|
if (resp.status == 200) {
|
|||
|
|
if (
|
|||
|
|
resp.headers.get("Content-Type").startsWith("application/json")
|
|||
|
|
) {
|
|||
|
|
return resp.json(); // json 对象
|
|||
|
|
} else {
|
|||
|
|
return resp.text(); // 文本数据
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.then((data) => {
|
|||
|
|
console.log(data);
|
|||
|
|
ret.innerText = "id=" + data.id + ", name=" + data.name;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|