90 lines
2.1 KiB
HTML
90 lines
2.1 KiB
HTML
<!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>美食demo</title>
|
|
<style>
|
|
li {
|
|
margin-bottom: 70px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<ul>
|
|
|
|
</ul>
|
|
|
|
|
|
<button>下一页</button>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
<script>
|
|
var page = 1;
|
|
|
|
function getData() {
|
|
// 拿出手机 创建一个新的ajax对象
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
// 输入号码
|
|
// 网址！ 是后端给我们的，而且不止一个，每一个网址都有一个具体的功能
|
|
xhr.open("GET", `http://127.0.0.1:3000/api /index/class?type=1&page=${page}`)
|
|
|
|
// 拨号
|
|
xhr.send();
|
|
|
|
// 状态监听
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState == 4) {
|
|
if (xhr.status == 200) {
|
|
var data = JSON.parse(xhr.responseText)
|
|
console.log(data);
|
|
render(data.result)
|
|
} else {
|
|
alert("当前请求失败，请稍后再试")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function render(data) {
|
|
|
|
data.items.forEach(v => {
|
|
document.querySelector("ul").innerHTML += `
|
|
<li>
|
|
<a href="./info.html?url=${v.path}">
|
|
<h2>${v.title}</h2>
|
|
<img src="${Array.isArray(v.img) ? v.img[0] : v.img}" alt="">
|
|
${
|
|
Array.isArray(v.author)
|
|
? ""
|
|
: `<div class="auth">
|
|
<img src="${v.author.avatar_url}" alt="">
|
|
作者：${v.author.nickname}
|
|
</div>`
|
|
}
|
|
|
|
</a>
|
|
</li>
|
|
`
|
|
});
|
|
}
|
|
|
|
document.querySelector("button").onclick = function () {
|
|
|
|
page+=1;
|
|
getData()
|
|
}
|
|
getData()
|
|
|
|
</script>
|
|
|
|
</html> |