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 获取到的数据是小数)


好了,就是这么简单,下课!


THE END

非特殊说明,本博所有文章均为博主原创

如若转载,请注明出处:https://www.htmlbk.com/web/628.html

TAG标签: