46 lines
1.6 KiB
HTML
46 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ajax请求</title>
|
|
</head>
|
|
<body>
|
|
<button id="load">加载更多</button>
|
|
<div id="photos"></div>
|
|
<script src="js/jquery.min.js"></script>
|
|
<script>
|
|
$(() => {
|
|
const url = 'http://api.tianapi.com/meinv/'
|
|
var page = 0
|
|
$('#load').on('click', (evt) => {
|
|
page += 1
|
|
let data = {"key": "772a81a51ae5c780251b1f98ea431b84", "page": page}
|
|
$.ajax({
|
|
"url": url, // 请求的地址(统一资源定位符)
|
|
"type": "get", // 请求的方法(get/post/delete/put)
|
|
"data": data, // 发送给服务器的数据
|
|
"dataType": "json", // 服务器返回的数据类型
|
|
"headers": {}, // 请求头
|
|
"success": (json) => { // 请求成功后要执行的回调函数
|
|
json.newslist.forEach((mm) => {
|
|
$('#photos').prepend($('<img width="300">').attr('src', mm.picUrl))
|
|
})
|
|
},
|
|
"error": (error) => { // 请求失败后要执行的回调函数
|
|
}
|
|
})
|
|
// $对象的getJSON方法可以执行异步请求(get请求)获得服务器返回的JSON格式的数据
|
|
// 第一个参数是请求的URL(统一资源定位符)
|
|
// 第二个参数是要发送给服务器的数据(JSON格式), 如果没有数据发给服务器可以省略不写
|
|
// 第三个参数是请求成功服务器返回数据之后要执行的回调函数, 其参数为服务器返回的内容处理后的JSON对象
|
|
// $.getJSON(url, data, (json) => {
|
|
// json.newslist.forEach((mm) => {
|
|
// $('#photos').prepend($('<img>').attr('src', mm.picUrl).attr('width', '300'))
|
|
// })
|
|
// })
|
|
})
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|