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;width: 550px;} 10 ul li {width: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條數據，當數據加載完了，就顯示 “沒有更多了”
歡迎大家留言評論