JQuery学习笔记，点击按钮加载更多的图片

手机
2025-09-12 08:06:01

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

<!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=' apis.tianapi /esports/index?key=b28784d07b8a040597XXXX...5&page=' var page=1 loadBtn.addEventListener('click',()=>{ page+=1 //创建异步请求对象 // .tianapi /#meinv let xhr=new XMLHttpRequest() // .tianapi /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=' apis.tianapi /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=' apis.tianapi /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>

标签：

JQuery学习笔记，点击按钮加载更多的图片由讯客互联手机栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“JQuery学习笔记，点击按钮加载更多的图片”

下一篇
Spring面试题总结