1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ajax点击加载更多数据--博客园--勇淘未来</title> 6 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> 7 <style> 8 *{padding:0;margin:0;} 9 .box {margin: 100px auto; 550px;} 10 ul li {550px;list-style: none;} 11 ul li span{text-align:center;display:block;} 12 .clear {clear: both;} 13 .load {text-align: center;display: none;margin-top:50px;color:#ccc;} 14 .end{display:none;color:#ccc;} 15 </style> 16 </head> 17 <body> 18 <div class="box"> 19 <ul></ul> 20 <div class="clear"></div> 21 <div class="load">加载中...</div> 22 <div class="more" style="text-align: center;margin-top:50px;"> 23 <button class="btn">查看更多图片</button> 24 <div class="end">没有更多了</div> 25 </div> 26 </div> 27 <script> 28 var num = 0; 29 var start = 0; 30 var size = 2; 31 $.ajax({ 32 url: "dataNews.json", 33 type: "get", 34 success: function(res){ 35 var str = ""; 36 for(var i = 0;i < 2;i++){ 37 str += "<li><img src=" + res[i].img + "><span>"+ res[i].title +"</span></li>"; 38 } 39 $(".box ul").append(str); 40 }, 41 error:function(){ 42 console.log(errors); 43 } 44 }) 45 $(".btn").click(function(){ 46 $(".load").show(); 47 setTimeout(function(){ 48 $(".load").hide(); 49 num++; 50 console.log(num); 51 start = num * size; 52 $.ajax({ 53 url:"dataNews.json", 54 type:"get", 55 success:function(res){ 56 var sum = res.length; 57 if(start + size > sum) { 58 size = sum - start; 59 $(".btn").css("display","none"); 60 $(".end").css("display","block"); 61 } 62 var str = ""; 63 for(var i = start;i<(start + size);i++) { 64 str += "<li><img src=" + res[i].img + "><span>"+ res[i].title +"</span></li>"; 65 } 66 console.log(start + size); 67 $("ul").append(str); 68 } 69 }); 70 },300) 71 } 72 ) 73 </script> 74 </body> 75 </html>
本地测试dataNews.json文件:
[ {
"img":"img/sina.jpg","title":"百度音乐1"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐2"
}
, {
"img":"img/sina.jpg","title":"百度音乐3"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐4"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐5"
}
, {
"img":"img/sina.jpg","title":"百度音乐6"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐7"
}
, {
"img":"img/sina.jpg","title":"百度音乐8"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐9"
}
, {
"img":"img/sina.jpg","title":"百度音乐10"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐11"
}
, {
"img":"img/sina.jpg","title":"百度音乐12"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐13"
}
, {
"img":"img/sina.jpg","title":"百度音乐14"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐15"
}
]
点击更多图片，加载2条数据，当数据加载完了，就显示 “没有更多了”
欢迎大家留言评论