通过ajax请求实现加载更多——常见的问题

这里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相比，否则会报错。