Ajax无刷新点击加载和滑动加载列表内容

Ajax无刷新加载内容，看起来高大上一点，但是对SEO是不太友好的，所以在使用的时候应该有个取舍。

实现步骤

一、点击更多按钮加载内容

1、首先，添加一个按钮用来触发事件。

<button class="more" type="submit">加载更多</button>

2、js代码部分，先引入jQuery

<script type="text/javascript">
    //在点击按钮（'.more'）的时候触发事件
    $('#More').on('click', function() {
        //开始Ajax提交请求，请求路径就是Api接口
        $.ajax({
            type: 'POST', //请求类型
            url: '请求地址', //请求地址
            dataType: 'json', //返回数据类型
            //请求参数
            data: {
                data1: '参数1',
                data1: '参数2'
            },
            //请求成功
            success: function(response, status) {
                //将数据整理append到对应位置
            },
            //请求失败
            error: function(xhr, status, error) {
                console.log(error); //返回数据异常
            }
        })
    })
</script>

完成，点击一下加载更多，页面就会无刷新加载了。

二、页面滑动到底部加载更多文章

原理同上，只不过改变一下事件，原来是点击按钮触发的，改成滚动监听。

<script type="text/javascript">
    //使用jQuery的scroll()方法来监听页面滚动
    $(window).scroll(function() {
        var WindowTop = $(window).scrollTop(); //当前窗口和页面顶部的距离
        var WindowHeight = $(window).outerHeight(); //可视窗口区域高度
        var DocHeight = $(document).height(); //页面的高度
        var load = true; //定义一个开关
        //判断：（窗口与页面顶部距离 + 窗口高度） >= 页面的高度（也就是滚动到页面底部的时候），并且开关是开启状态，执行ajax加载内容
        if ((WindowTop + WindowHeight) >= DocHeight && load == true) {
            load = false; //设置开关状态为关闭，防止重复加载
            //开始Ajax提交请求，请求路径就是Api接口
            $.ajax({
                type: 'POST', //请求类型
                url: '请求地址', //请求地址
                dataType: 'json', //返回数据类型
                //请求参数
                data: {
                    data1: '参数1',
                    data1: '参数2'
                },
                //请求成功
                success: function(response, status) {
                    //将数据整理append到对应位置

                    load == true; //设置开关状态为开启，进行下次加载
                },
                //请求失败
                error: function(xhr, status, error) {
                    console.log(error); //返回数据异常
                }
            })
        }
    })
</script>

可能会出现的问题请参考：使用 scrollTop 判断是否下滑到底 出错原因（scrollTop 获取到的数据是小数）

好了，就是这么简单，下课！

本文链接：http://so.lmcjl.com/news/518/