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/static/home/image/the-end.png)
本站部分文章搜集整理于互联网或者网友提供,如有侵权请联系站长
如若转载,请注明出处:https://htmlbk.com/web/628.html
温馨提示:该文档最后一次修改时间为2022-03-28 20:05:49,请注意相关的内容是否还可用!