The monk who loves to sing: Don't talk nonsense, just go straight to the dry goods~!
<!DOCTYPE html>
<html>
<head>
<title>Page scrolls to refresh and automatically loads data</title>
<meta charset='utf-8' />
<!--Introduce jquery-->
<script src='./jquery-3.3.1.min.js'></script>
</head>
<!--===============================html part =============== ==============-->
<body>
<!--Set a div higher than the current browser height-->
<div id='test' style='width:960px;height:2000px;background-color:#aaa;margin:0 auto'>内容区域</div>
<!--The automatically loaded data is stored in this div-->
<div id='text' style='width:960px;height:auto;margin:0 auto;background-color:#bbb;'></div>
<!--The gif animation used in the waiting process when loading data is hidden at the beginning-->
<div id='loading' style='display:none;width:960px;height:30px;auto;margin:0 auto'>
<img style='width:100%;height:100%' src='./logogif.gif' />
</div>
</body>
</html>
<!--===============================js part =============== ==============-->
<script>
$(document).ready(function(){
$(window).scroll(function(){
//$(document).scrollTop(); //The distance between the scroll bar position and the top of the page
//$(document).height(); //Total height of the entire page
//$(window).height(); //The height of the currently visible window
//When the height of the scroll = the total height of the document - the height of the current window, it means that the height of a window has been scrolled, and it has reached the bottom of the current window
if( $(document).scrollTop() >= $(document).height() - $(window).height() ){ //Determine whether it has scrolled to the bottom of the page
//Switch the state of loading animation to display
$('#loading').css('display','block');
//load data via ajax
$.ajax({
type:'post',
url:'./data.php', //A php file requested here
success:function(data){ //Callback function executed when the request is successful
data = JSON.parse(data); //Organize the json data returned by php into an array
var str = '';
$.each(data,function(i,item){ //traverse the content in json, i identifies the current traversal to the first content, item represents the currently traversed object
str += item['name'] + ' ' + item['age'] + ' ' + item['sex'] + '<br />';
});
//Append the traversed content to the div with the id of text
$('#text').append(str);
//Switch the state of loading animation to hidden
$('#loading').css('display','none');
}
});
}
});
});
</script>
===============================data.php source code ================= ===========
<?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数据?>