Php+ajax Dynamic loading data technology without refreshing

No refresh function We use a lot of many, the following I will give you an example, is to achieve the php+ajax to achieve no refreshing scrolling load data, examples of very simple everyone as long as the process to operate on the OH.

When we browse some Web pages, when we pull the browser's scroll bar to the bottom of the page, the page will continue to automatically load more content for the user to browse. This technique I call it the rolling screen loading technology for the moment. We found that many sites use this technology, Bing image search, Sina Weibo, QQ space, etc. will be the use of this technology incisively and vividly.

Rolling screen loading technology, is the use of JavaScript to monitor the position of the scroll bar, each time the scroll bar to the bottom of the browser window, triggering an AJAX request background PHP program, return the corresponding data, and the returned data appended to the bottom of the page, thereby enabling dynamic loading, is actually a typical AJAX application. This article will use jquery, combined with php,mysql and JSON, to teach you how to apply a scrolling load technology to your project. Of course, the premise of reading this article is that you need to have jquery and PHP-related basics.

index.php

We have to display 15 data by default, so we first display 15 data from the database to the page. We will also show the new loaded data in the same way 15 times a time.

To explain as simple as possible, I use native PHP and MySQL query statements. First, you need to connect to the database, including the connnect.php of the connection information. Here I define a few user IDs.

Then query the data table, get the result set, and loop the output, the code is as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<?php require_once (' connect.php '); $user = Array (' Demo1 ', ' Demo2 ', ' Demo3 ', ' Demo3 ', ' Demo4 ');?> <div id= "container" > <?php $query =mysql_query ( "SELECT * from say ORDER BY id DESC limit 0,15"); while ($row =mysql_fetch_array ($query)) {?> <div class= "Single_item" > <div class= "Element_head" > < div class= "date" ><?php echo date (' m-d h:i ', $row [' addtime ']);? ></div> <div class= "Author" ><?php echo $user [$row [' UserID ']];? ></div> </div> <div class= "content" ><?php echo $row [' content '];? ></div> </div> <?php}?> </div> <div class= "NoData" ></div>

Note: This example uses the data from this site article:, the article has created the data table introduction.

Jquery

1. First, we want to get the height of the browser visual area page:

The code is as follows:

var Winh = $ (window). Height ();

2. Then, when scrolling the page, what you need to do is: Calculate the total height of the page (when the bottom of the scroll, the page new load data, so the total page height is dynamic), calculate the scroll bar position (scroll bar position is also with the load of the height of the page dynamic changes), and then construct a formula to calculate the relative proportions.

?

1 2 3 4 5

$ (window). Scroll (function () {var Pageh = $ (document.body). Height ();//page total height var scrollt = $ (window). scrolltop ();//scroll bar to P var aa = (pageh-winh-scrollt)/winh; });

3, when the scroll bar near the bottom of the page, triggering Ajax loading, in this case we use the Getjson method of jquery, to the server result.php send the request, the requested parameter is page, that is, page number.

?

1 2 3 4 5

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

4. If the request response returns JSON data successfully, the JSON data is parsed and the data is appended to the page Div#container, and if no JSON data is returned, the data is all displayed

?

1 2 3 4 5 6 7 8 9 10 11

if (JSON) {var str = ""; $.each (Json,function (Index,array) {//traverse var str = "..."; Gets the JSON data $ ("#container"). Append (str); Append}); i++; Page +1}else{$ (". NoData"). Show (). HTML ("Don't roll, it's gone ..."). "); 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 The

$ (function () {var Winh = $ (window). height ();//page Visual region height var i = 1; Sets the current number of pages $ (window). Scroll (function () {var Pageh = $ (document.body). Height (); var scrollt = $ (window). scrolltop ();//scroll bar t OP 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 = "<div class=" Single_item "><div class=" Element_head ">"; var STR + + "<div class=" date ">" +array[' Date ']+ "</div>"; var str + + "<div class=" Author ">" +array[' author ']+ ' </div> "; var str + + "</div><div class=" Content ">" +array[' content ']+ "</div></div>"; $ ("#container"). Append (str); }); i++; }else{$ (". NoData"). Show (). HTML ("Don't roll, it's gone ..."). "); return false; } }); } }); });

result.php

When scrolling to the bottom of the page, the front-end Ajax request to result.php, the daemon will be based on the requested number of data pages: page, query the corresponding records in the datasheet, and the recordset in JSON format output returned to the front-end processing.

?

1 2 3 4 5 6 7 8 9 10 11 12 13-14

Require_once (' connect.php '); Connection Database $user = Array (' Demo1 ', ' Demo2 ', ' Demo3 ', ' Demo3 ', ' Demo4 '); $page = intval ($_get[' page ')); Gets the number of pages requested $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 [' UserID ']], ' Date ' =>date (' m-d h:i ', $row [' addtime ']); echo Json_encode ($arr); Convert to JSON data output

Well, the introduction of this article to the end, quickly to see the effect of it.

The above mentioned is the entire content of this article, I hope you can enjoy.