页面滚动刷新并实时加载数据

最新推荐文章于 2024-04-21 09:58:22 发布

L蓝镜J

最新推荐文章于 2024-04-21 09:58:22 发布

阅读量8k

点赞数 1

文章标签：滚屏加载

本文链接：https://blog.csdn.net/weixin_42007636/article/details/80036187

版权

<!DOCTYPE html>
<html>
<head>
<title>页面滚动刷新并自动加载数据</title>
<meta charset='utf-8' />

<script src='./jquery-3.3.1.min.js'></script>
</head>


<body>


<div id='test' style='width:960px;height:2000px;background-color:#aaa;margin:0 auto'>内容区域</div>


<div id='text' style='width:960px;height:auto;margin:0 auto;background-color:#bbb;'></div>


<div id='loading' style='display:none;width:960px;height:30px;auto;margin:0 auto'>

</div>

</body>
</html>


<script>
$(document).ready(function(){
$(window).scroll(function(){
//$(document).scrollTop(); //滚动条位置距页面顶部的距离
//$(document).height(); //整个页面的总高度
//$(window).height(); //当前可见窗口的高度

//滚动条位置距页面顶部的距离 = 文档的总高度 - 当前窗口的高度时，就意味着已经滚动了一个窗口的高度，及已经到当前窗口的底部
if( $(document).scrollTop() >= $(document).height() - $(window).height() ){ //判断是否已经滚动到页面底部
//切换加载动图的状态为显示
$('#loading').css('display','block');

//通过ajax加载数据
$.ajax({
type:'post',
url:'./data.php', //这里请求的一个php文件
success:function(data){ //当请求成功时执行的回调函数
data = JSON.parse(data); //将php返回的json数据整理成数组

var str = '';
$.each(data,function(i,item){ //遍历出json里的内容,i标识当前遍历到第几条内容,item表示当前遍历的对象
str += item['name'] + ' ' + item['age'] + ' ' + item['sex'] + '<br />';
});
//将遍历到的内容追加到id为text的div中去
$('#text').append(str);

//切换加载动图的状态为隐藏
$('#loading').css('display','none');
}
});
}
});
});
</script>

================data.php源码================

<?php
$arr2_str = array();

$arr2_str[0]["name"]="李金";
$arr2_str[0]["age"]=33;
$arr2_str[0]["sex"]="男";

$arr2_str[1]["name"]="熊金菊";
$arr2_str[1]["age"]=23;
$arr2_str[1]["sex"]="女";

echo json_encode($arr2_str); //返回json数据
?>

L蓝镜J

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
页面滚动刷新并实时加载数据

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;页面滚动刷新并自动加载数据&lt;/title&gt;&lt;meta charset='utf-8' /&gt;&lt;!--引入jquery--&gt;&lt;script src='./jquery-3.3.1.min.js'&gt;&lt;
复制链接

扫一扫