JQuery学习笔记，点击按钮加载更多的图片-优快云博客

本文链接：https://blog.youkuaiyun.com/Katherine1029/article/details/145959224

利用点击按钮模拟某京，某宝，滚动页面加载图片的效果，代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajax请求</title>
	</head>
	<body>
		<button id="load">加载更多</button>
		<div id="photos">
		</div>
		<script>
			(()=>{
				const photos=document.querySelector("#photos")
				// const.photos=document.getElementById('photos')
				const loadBtn=document.getElementById('load')
                //URL 需要自己申请
				const url='https://apis.tianapi.com/esports/index?key=b28784d07b8a040597XXXX...5&page='
				var page=1
				loadBtn.addEventListener('click',()=>{
					page+=1
					//创建异步请求对象
					//https://www.tianapi.com/#meinv
					let xhr=new XMLHttpRequest()
					//https://www.tianapi.com/gethttp/265
					//open方法的第一个参数是请求的类型，第二个是请求的URL，第三个参数必须设置为true，表示发出的异步请求
					//URl 的结尾加上&num=30表示一次拿30个数据
					xhr.open('get',url+page,
					true)//true表示发的是异步请求
					//绑定事件回调函数，在收到Server返回的数据后要对页面进行局部刷新
					//就绪状态改变的事件
					xhr.addEventListener('readystatechange',()=>{
						//判断请求是否成功
						//405访问方法错，403没有访问权限，401未授权；4--请求错
						//5--Server错了（一般看不到，一般是Server升级维护中）
						//3--重定向（曾经请求过，数据还是原来的数据）
						if(xhr.readyState ==4 &&xhr.status==200){
							alert(xhr.responseText)
							//alert(xhr.responseText)传出的是字符string
							//将返回的JSON字符串解析成Javascript对象
							let json=JSON.parse(xhr.responseText)
							json.result.newslist.forEach((mm)=>{
								//console.log(mm.picUrl)
								let img=document.createElement('img')
								img.src=mm.picUrl
								img.width='300'
								console.log(img)
								photos.insertBefore(img, photos.firstElementChild)
								
							})
							
						}
					})
					//发出异步请求
					xhr.send()
				})
				
			})()
		</script>
	</body>
</html>

运行完成可以点击每一次按钮加载不同的图片

使用JQuery方法改写后的代码

<!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-3.7.1.min.js'></script>
		<script>
			$(()=>{
				const url='https://apis.tianapi.com/esports/index?key='
				var page=0
				$('#load').on('click',(evt)=>{
					page+=1
					let date={"key"="b28..........575","page":page}
					//$对象getJSON方法可以执行异步请求（get请求）获得服务器返回的JSON格式
					//第一个参数是请求的URL（统一资源定位符）
					//第二个参数是要发送给Server的数据（JSON格式），如果没有数据发送给服务器可以为空
					//第三个参数是请求成功服务器返回数据之后要执行的回调函数，其参数为服务器的JSON对象
					$.getJSON(url,data,(json)=>{
						json.result.newslist.forEach((mm)=>{
							console.log(mm.picUrl)
							$('#photos').prepend($('<img>').attr('src',mm.picUrl).attr('width','300'))
							
						})
					})
				})
			})
		</script>
	</body>
</html>

Jquery 的$.ajax({})使用

<!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-3.7.1.min.js'></script>
		<script>
			$(()=>{
				const url='https://apis.tianapi.com/esports/index'
				var page=0
				$("#load").on("click",(evt)=>{
					page += 1
					let data={"key":"b287.......75","page":page}
					$.ajax({
						"url":url,
						"type":"get",//请求方式：可以是post,get,delete,put,patch 默认是get请求，可以省略不写
						"data":data,
						"datatype":"json",//返回的数据类型，XML：XML类型；text:文本类型 默认是JSON格式，可以省略不写
						"headers":{},//请求头没有东西可以忽略不写
						"success":(json)=>{
							json.result.newslist.forEach((mm)=>{
									console.log(mm.picUrl)
									$('#photos').prepend($('<img>').attr('src',mm.picUrl).attr('width','300'))
									
								})
							
						},//请求成功了干什么
						"errors":(error)=>{},//请求失败了干什么 可以省略
					})
					
				})
					
			})
		</script>
	</body>
</html>