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
3 4 5 6 7 8 9
|
<🎜>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)) {<🎜>
<🎜>?>
|
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.
?
2 3
4 5 |
|
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; } |
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 = " ";
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.
?
2 3 4 12 13
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 |