Php+ajax implementation of non-refresh paging methods and examples of detailed

This article mainly introduces the method of Php+ajax to implement no-refresh paging, detailed analysis of PHP combined with Ajax to implement the specific steps and related techniques of non-refresh paging, with the demo source code for the reader to download the reference, the need for friends can refer to the next

Note : Some of the class libraries used here can find the source code in the previous article, so in order to shorten the length of the article, the link is indicated.

This article explains: Ajax implementation of no refresh paging, implementation principle, code display, code download.

Here are some facts to note:

1, Ajax does not refresh the benefits of the page: to provide a good customer experience, through Ajax in the background from the database to obtain data and display, to suppress the waiting to load the page to appear blank state;

2, then, Ajax no Refresh page is run on dynamic page (. php)? or a static page (. html/.htm/.shtml)? The answer is: static page;

3, the realization principle: through the front-end JS script program and the Ajax combination obtains the data which returns from the dynamic page, and displays.

OK, here's a code explanation:

Now that we are running on a static page, we first create a static HTML page, and the index.html code listing is as follows.

Index.html

<! DOCTYPE html>

Code listing, we have loaded an Ajax class library, which can be found in the previous article, "A simple Ajax class library and use method instance analysis"

In this static page, only a "data load ..." is displayed, and there is no data. At this point, we need a JS script to get the data from the database via Ajax. The JS script is as follows:


<script type= "Text/javascript" >  /**  * setpage (URL) get data from article.php based on URL  * @param int pagenum page number 
  * @return String  */  var cache=new Array ()//cache variable, which is placed in the cache after the data has been accessed, speeding up the access speed  function Setpage (pagenum) {    var fpage = document.getElementById (' fpage ');//Get Fpage object    //If there is data in the cache, read it directly from the cache, and if there is no data, read from the database. And put the data in cache    if (typeof (Cache[pagenum]) = = ' undefined ') {      var ajax = Ajax ();      Ajax.get (' article.php?page= ' +pagenum, function (data) {        fpage.innerhtml = data;//Fpage The contents of the object are taken from the article.php        Cache[pagenum] = data;      })    } else {      fpage.innerhtml = Cache[pagenum];    }  }  Setpage (1); Default Execution </script>

Reading the above code carefully, you will find the following phenomenon:

1, Setpage (pagenum) is a data extraction from the database JS function interface;
2, Ajax is through the article.php file to obtain data;
3, article.php?page=xx, here xx is to obtain the page number data,
Setpage (1): is to obtain the 1th page of data;
Setpage (2): is to obtain the 2nd page of data;
Setpage (100): is to obtain the 100th page of data;
......

So, how do you get data from the article.php file? Take a look at the code listing below.

article.php


<?php/*** $Id: article.php* author lee.* last modify $Date: 2012-01-21 16:53:05 $*/require_once './config.inc.php '; $m = New Model (); $page = new Ajaxpage ($m->total (' article '), 20); $m->total (' article ') gets the number of records for the article table, 10 for each page 10 $result = $m->fetchall (' article ', ' * ', ', ', ', $page->limit); Take out the data, ^_^, it's easy. Echo ' <table align= "center" border= "1" width= "1100" style= "border-collapse:collapse;font-size : 14px; "bordercolor=" #666 ">"; Echo ' <caption>

article.php data is connected in the previous article from the Huaqiang electronic network captured information data, because the data is relatively large, the code package download will be attached to the Article.sql file, so that you can test.

The data displayed on the static page index.html is the echo code in the article.php file.
The config.inc.php file in the code file mainly defines constants, such as: Database user name, database password, host ..., Database connection class library (Db.class.php), and Database Operations Class library (Model.class.php), please refer to the article PHP's PDO Common class Library example analysis, with the use of the method.

Program:

Mark the place to pay attention to


In this way, Ajax no-refresh paging is complete. There is also a ajaxPage.class.php in the program does not explain, in fact, the use of this Ajaxpage class library is the same as the normal paging class library.

That is: $page = new Ajaxpage (total number of records, displayed per page);

Summary: The above is the entire content of this article, I hope to be able to help you learn.