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

2016-11-25 19:53:13来源:CSDN作者:candy_tity人点击

第七城市

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

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台