115 lines
2.6 KiB
HTML
115 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>ajax</title>
|
||
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
|
||
<style>
|
||
/* .more {
|
||
display: none;
|
||
} */
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
|
||
<div class="main">
|
||
</div>
|
||
|
||
<div class="page">
|
||
<span class="next"> > 加载更多 < </span>
|
||
<span style="display: none;">...正在请求，请稍后</span>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
|
||
|
||
|
||
// 1：拿出电话 创建ajax请求
|
||
// var ajax = new XMLHttpRequest();
|
||
|
||
// // 2: 输入号码 设置ajax请求参数
|
||
// ajax.open("GET","http://127.0.0.1:9999/api/v1.0/index");
|
||
|
||
// // 3: 拨打电话 发送ajax请求
|
||
// ajax.send();
|
||
|
||
// // 对打电话的状态进行监听 监听ajax是否发送成功
|
||
// ajax.onreadystatechange = function () {
|
||
// if(ajax.readyState == 4 && ajax.status == 200) {
|
||
// // JSON.parse 把string格式的数据转换为json格式
|
||
// // JSON.stringify 把json格式转换为string格式
|
||
// var list = JSON.parse(ajax.responseText);
|
||
// for (var i =0;i<list.data.length;i++) {
|
||
// document.querySelector(".main").innerHTML += `
|
||
// <div >
|
||
// <a href="${list.data[i].href}">
|
||
// <h3>${list.data[i].title}</h3>
|
||
// <img src="${list.data[i].imgurl}"/>
|
||
// </a>
|
||
// </div>
|
||
// `
|
||
// }
|
||
// }else {
|
||
// if(ajax.status == 0){
|
||
// alert("抱歉, 您的网络不好请重试")
|
||
// }
|
||
// }
|
||
// }
|
||
|
||
var current_page = 1;
|
||
|
||
function getdata() {
|
||
console.log(this);
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: 'http://127.0.0.1:9999/api/v1.0/index',
|
||
data: {
|
||
page : current_page
|
||
},
|
||
success: function (result) {
|
||
result.data.forEach(function(value){
|
||
$(".main").append(` <div > <a href="${value.href}"> <h3>${value.title}</h3> <img src="${value.imgurl}"/> </a> </div>`)
|
||
});
|
||
|
||
//$("span:last").addClass("more")
|
||
|
||
$("span:last").css({
|
||
"display": "none"
|
||
})
|
||
|
||
},
|
||
error: function (err) {
|
||
alert("抱歉，您的网络不好")
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
// 加载更多被点击的时候
|
||
$(".next").on("click",function() {
|
||
//$(".more").removeClass("more")
|
||
$("span:last").css({
|
||
"display": "inline-block"
|
||
})
|
||
current_page += 1
|
||
|
||
getdata()
|
||
|
||
|
||
})
|
||
|
||
|
||
getdata()
|
||
|
||
|
||
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |