Day21-30/code/new/web1901/example_of_jquery_4.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>