php ajax realizes dynamic loading of data without refreshing Refresh the scrolling screen to load data. The example is very simple. You just need to follow the process.
When we browse some web pages, when the scroll bar of the browser is pulled to the bottom of the page, the page will continue to automatically load more content for the user to browse. Let me call this technology scroll loading technology. We found that many websites use this technology. Bing image search, Sina Weibo, QQ Zone, etc. have fully applied this technology.
Scroll loading technology uses Javascript to monitor the position of the scroll bar. Every time the scroll bar reaches the bottom of the browser window, an Ajax request is triggered to the background PHP program, the corresponding data is returned, and the returned data is appended to the bottom of the page. , thus realizing dynamic loading, which is actually a typical Ajax application. This article will use jQuery, combined with PHP, mysql and JSON, to explain how to apply scroll loading technology to your project. Of course, the prerequisite for reading this article is that you need to have a basic knowledge of jQuery and PHP.
index.php
We want to display 15 pieces of data by default, so we first fetch the first 15 pieces of data from the database and display them on the page. We will also display the newly loaded data in 15 pieces at a time.
In order to explain as briefly as possible, I use native PHP and mysql query statements. First, you need to connect to the database, including connect.php with connection information. Here I define several user IDs.
Then query the data table, obtain the result set, and output it in a loop. The code is as follows:
?
|
1
2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
require_once('connect.php');
$user = array('demo1','demo2','demo3','demo3','demo4');
?>
$query=mysql_query("select * from say order by id desc limit 0,15");
while ($row=mysql_fetch_array($query)) {
?>
|
3
4
5
6
7
8
9
|
1
2
3
4
5
|
$(window).scroll(function () {
var pageH = $(document.body).height(); //页面总高度
var scrollT = $(window).scrollTop(); //滚动条top
var aa = (pageH-winH-scrollT)/winH;
});
|
10
11
12
13
14
15
16
17
18
19
|
<🎜>require_once('connect.php');<🎜>
<🎜>$user = array('demo1','demo2','demo3','demo3','demo4');<🎜>
<🎜>?>
<🎜>$query=mysql_query("select * from say order by id desc limit 0,15");<🎜>
<🎜>while ($row=mysql_fetch_array($query)) {<🎜>
<🎜>?>
|
Note: The data used in this example comes from the article on this site: There is an introduction to creating a data table in the article.
jQuery
1. First, we need to get the height of the browser’s visible area page:
The code is as follows:
var winH = $(window).height();
2. Then, what needs to be done when scrolling the page is: calculate the total height of the page (when scrolling to the bottom, the page loads new data, so the total page height changes dynamically), calculate the scroll bar position (scroll bar The position also changes dynamically with the height of the loaded page), and then construct a formula to calculate the relative proportion.
?
|
1
2
3
4
5
|
$(window).scroll(function () {
var pageH = $(document.body).height(); //Total page height
var scrollT = $(window).scrollTop(); //Scroll bar top
var aa = (pageH-winH-scrollT)/winH;
});
|
3. When the scroll bar is close to the bottom of the page, ajax loading is triggered. In this example, we use jQuery's getJSON method to send a request to the server result.php. The request parameter is page, which is the number of pages.
?
|
1
2
3
4
5
|
if(aa<0.02){
$.getJSON("result.php",{page:i},function(json){
.....
});
}
|
1
2
3
|
1
2
3
4
5
6
7
8
9
10
11
|
if(json){
var str = "";
$.each(json,function(index,array){ //遍历
var str = "..."; //获取的JSON数据
$("#container").append(str); //追加
});
i ; //页数 1
}else{
$(".nodata").show().html("别滚动了，已经到底了。。。");
return false;
}
|
4
5
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
$(function(){
var winH = $(window).height(); //页面可视区域高度
var i = 1; //设置当前页数
$(window).scroll(function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滚动条top
var aa = (pageH-winH-scrollT)/winH;
if(aa<0.02){
$.getJSON("result.php",{page:i},function(json){
if(json){
var str = "";
$.each(json,function(index,array){
var str = " ";
var str = " " array['date'] " ";
var str = " " array['author'] " ";
var str = " " array['content'] " $("#container").append(str);
});
i ;
}else{
$(".nodata").show().html("别滚动了，已经到底了。。。");
return false;
}
});
}
});
});
|
if(aa<0.02){
$.getJSON("result.php",{page:i},function(json){
.....
});
}
|
4. If the request response successfully returns JSON data, parse the JSON data and append the data to the page DIV#container. If no JSON data is returned, it means that all the data has been displayed
?
|
1
2
3
4
5
6
7
8
9
10
11
|
if(json){
var str = "";
$.each(json,function(index,array){ //Traverse
var str = "..."; //obtained JSON data
$("#container").append(str); //Append
});
i ; //Page number 1
}else{
$(".nodata").show().html("Stop scrolling, it’s the end...");
return false;
}
|
The complete jQuery code is as follows:
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
$(function(){
var winH = $(window).height(); //Height of the visible area of the page
var i = 1; //Set the current page number
$(window).scroll(function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //Scroll bar top
var aa = (pageH-winH-scrollT)/winH;
if(aa<0.02){
$.getJSON("result.php",{page:i},function(json){
if(json){
var str = "";
$.each(json,function(index,array){
var str = "";
var str = " " array['date'] " ";
var str = " " array['author'] " ";
var str = " " array['content'] " |
result.php
When scrolling to the bottom of the page, the front-end Ajax request is to result.php. The background program will query the corresponding records in the data table according to the requested data page number: page, and output the record set in json format and return it to Front-end processing.
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
require_once('connect.php'); //连接数据库
$user = array('demo1','demo2','demo3','demo3','demo4');
$page = intval($_GET['page']); //获取请求的页数
$start = $page*15;
$query=mysql_query("select * from say order by id desc limit $start,15");
while ($row=mysql_fetch_array($query)) {
$arr[] = array(
'content'=>$row['content'],
'author'=>$user[$row['userid']],
'date'=>date('m-d H:i',$row['addtime'])
);
}
echo json_encode($arr); //转换为json数据输出
|
1
2
3
4
5
6
7
8
9
10
11
12
14
|
require_once('connect.php'); //Connect to the database
$user = array('demo1','demo2','demo3','demo3','demo4');
$page = intval($_GET['page']); //Get the requested page number
$start = $page*15;
$query=mysql_query("select * from say order by id desc limit $start,15");
while ($row=mysql_fetch_array($query)) {
$arr[] = array(
'content'=>$row['content'],
'author'=>$user[$row['userid']],
'date'=>date('m-d H:i',$row['addtime'])
);
}
echo json_encode($arr); //Convert to json data output
|
Okay, the introduction of this article is over, go and see the effect.
The above is the entire content of this article, I hope you all like it.
http://www.bkjia.com/PHPjc/991649.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/991649.htmlTechArticlephp ajax implements no-refresh dynamic loading of data technology without refresh function. We use many, many, and I will give them below. Please introduce an example, which is to implement php ajax to achieve scrolling loading without refreshing...
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
