59 lines
1.7 KiB
HTML
59 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ajax</title>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<h2></h2>
|
||
<ul></ul>
|
||
|
||
</body>
|
||
|
||
<script>
|
||
|
||
// 拿出电话（创建一个新的ajax对象）
|
||
var ajax = new XMLHttpRequest();
|
||
// 设置电话号码
|
||
// 是否异步
|
||
ajax.open('GET', 'http://127.0.0.1:3000/index', true)
|
||
|
||
// 拨号
|
||
ajax.send();
|
||
|
||
// 监听网络状态，只有网络请求成功的时候才渲染页面，否则显示错误信息
|
||
ajax.onreadystatechange = function () {
|
||
if (ajax.readyState == 4) {
|
||
if (ajax.status == 200) {
|
||
console.log(ajax.responseText);
|
||
var data = JSON.parse(ajax.responseText);
|
||
console.log(data);
|
||
document.querySelector("h2").innerText = data.title;
|
||
data.list.forEach(v => {
|
||
document.querySelector("ul").innerHTML += `<li>${v.title}</li>`
|
||
});
|
||
// 将符合object或者array的字符串数据转化为 object 或 array类型 JSON.parse
|
||
// 将标准的object或者array 转换为string JSON.stringify(a)
|
||
} else {
|
||
console.log("数据请求失败，稍后再试");
|
||
}
|
||
}
|
||
}
|
||
|
||
// function getData(res) {
|
||
// console.log(res);
|
||
// var data = res;
|
||
// console.log(data);
|
||
// document.querySelector("h2").innerText = data.title;
|
||
// data.list.forEach(v => {
|
||
// document.querySelector("ul").innerHTML += `<li>${v.title}</li>`
|
||
// });
|
||
// }
|
||
</script>
|
||
<!-- <script src="http://127.0.0.1:3000/index?c=getData"></script> -->
|
||
|
||
</html> |