通過ajax請求實現載入更多——常見的問題
阿新 • • 發佈:2019-01-30
這裡tity主要給大家講兩個問題:
一是載入中動畫,二是關於“沒有更多了”的判斷。
一、載入中動畫,可以增強使用者體驗度,給使用者一種當前頁面正在處理的感覺,而不是沒有任何反應,讓使用者感覺摸不著頭腦。
實現方法:在ajax請求中新增beforeSend方法。
示例程式碼:
<script type="text/javascript">
$('#getMore').click(function(){
$.ajax({
type: 'get',
url: 'https://www.demo.com',
data: data,
dataType: 'json' ,
beforeSend: function(){
$('#loadingMask').show();
$('#getMore').hide();
},
success: function(data) {
$('#loadingMask').hide();
$('#getMore').show();
},
error: function(data) {
$('#loadingMask').hide();
$('#getMore').show();
}
});
});
</script>
這裡的#getMore代表的就是載入更多的按鈕,而#loadingMask表示的就是載入中的動畫,這裡的動畫可以用gif來實現,也可以通過CSS3載入中動畫來實現。
二、關於沒有更多了的功能的判斷,主要是判斷來自伺服器的返回的資料的長度,假定我們與服務端約定好,每次請求返回20條資料,那麼如果返回的資料少於20的時候,我們就認為沒有更多了。
示例程式碼:
<script type="text/javascript">
$(function(){
$('#getMore').click(function(){
$.ajax({
type: 'get',
url: 'https://www.demo.com',
data: data,
dataType: 'json',
beforeSend:function(){
$('#loadingMask').show();
$('#getMore').hide();
},
success: function(data) {
$('#loadingMask').hide();
$('#getMore').show();
if(data.length > 0){
for(var i = 0; i < data.length; i++){
// 這裡是插入資料的操作
}
if(data.length < 20){
$('#getMore').hide();
$('#noMore').show();
}
}
},
error: function(data) {
$('#loadingMask').hide();
$('#getMore').show();
}
});
});
})
</script>
這部分功能的實現主要在success函式裡面,#noMore代表的就是沒有更多了的div。
在這裡特別注意一點,就是success中的插入資料的迴圈操作中,i每次應該與返回的data的長度相比,而不能與我們預設的20相比,否則會報錯。