Php + ajax implement data loading without refreshing the new version _ php instance

We have used a lot of new features without refreshing. Next I will introduce you to an instance, that is, implementing php + ajax to load data without refreshing new scrolling screens, the example is very simple. You only need to follow the process. When we browse some web pages, when the browser's scroll bar is pulled to the bottom of the page, the page will continue to automatically load more content for users to browse. For the moment, this technology is called the scrolling loading technology. We found that many websites use this technology, and Bing image search, Sina Weibo, and QQ space fully applied this technology.

The rolling screen 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 PHP program in the background and corresponding data is returned, and append the returned data to the bottom of the page to achieve dynamic loading, which is actually a typical Ajax application. This article uses jQuery and PHP, mysql, and JSON to explain how to apply the scrolling loading technology to your project. Of course, the premise of reading this article is that you need to have a foundation related to jQuery and PHP.

Index. php

By default, 15 data records are displayed. Therefore, the 15 data records starting from the database are displayed on the page. The newly loaded data is displayed in 15 records each time.

To make the explanation as simple as possible, I use native PHP and mysql query statements. First, you need to connect to the database, including the connection information of connnect. php. Here I have defined several user IDs.

Query the data table, obtain the result set, and output it cyclically. The Code is as follows:

<?php require_once('connect.php'); $user = array('demo1','demo2','demo3','demo3','demo4'); ?> 
   <?php   $query=mysql_query("select * from say order by id desc limit 0,15");   while ($row=mysql_fetch_array($query)) {   ?>   
     
        
<?php echo date('m-d H:i',$row['addtime']);?>
        
<?php echo $user[$row['userid']];?>
      
      
<?php echo $row['content'];?>
   
   <?php } ?>  
 
 

Note: The data used in this example comes from this article: This article describes how to create a data table.

JQuery

1. First, we need to get the page height of the visible area of the browser:

The Code is as follows:

Var winH = $ (window). height ();

2. What you need to do when rolling a page is: calculate the total page height (when rolling the bottom, the page loads data, so the total page height changes dynamically ), calculate the position of the scroll bar (The position of the scroll bar also dynamically changes with the height of the page loaded), and construct a formula to calculate the relative proportion.

$ (Window ). scroll (function () {var pageH = $ (document. body ). height (); // The total page height var scrollT = $ (window ). scrollTop (); // top var aa = (pageH-winH-scrollT)/winH ;});

3. When the scroll bar approaches the bottom of the page, ajax loading is triggered. In this example, jQuery's getJSON method is used to send the result to the server. php sends a request. The request parameter is page, that is, the number of pages.

if(aa<0.02){   $.getJSON("result.php",{page:i},function(json){     .....   });  } 

4. If the request Response Returns JSON data, parse the JSON data and append the data to the page DIV # container. If no JSON data is returned, all the data is displayed.

If (json) {var str = ""; $. each (json, function (index, array) {// traverse var str = "... "; // JSON data obtained $ (" # container "). append (str); // append}); I ++; // page number + 1} else {$ (". nodata "mongo.show(mongo.html (" Don't scroll, it's already done... "); Return false ;}

The complete jQuery code is as follows:

$ (Function () {var winH = $ (window ). height (); // The 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 (); // The 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 "mongo.show(mongo.html (" Don't scroll, it's already done... "); Return false ;}});}});});

Result. php

When you scroll to the bottom of the page, the front-end Ajax requests the result. php, the background program queries the corresponding records in the data table based on the requested data page, and outputs the record set in json format to the front-end for processing.

Require_once ('connect. php '); // connect to the database $ user = array ('demo1', 'demo2', 'demo3', 'demo3', 'demo3 '); $ page = intval ($ _ GET ['page']); // obtain 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

Now, the introduction to this article is over. Go and check the effect.

The above is all the content of this article. I hope you will like it.