Php+ajax implementation of No refresh paging instances (with demo source download) _php Tips

The example in this article describes a method for Php+ajax implementation without refreshing paging. Share to everyone for your reference, specific as follows:

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.

The content of this article is: Ajax to achieve no refresh paging, implementation principle, code display, code download.

Here are some things to say:

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, banning the waiting to load the page and appear in the blank state;

2, then, Ajax no Refresh page is running in the dynamic page (. php)? Still a static page (. html/.htm/.shtml)? The answer is: static page;

3, the implementation of the principle: through the front-end JS script program and Ajax combined to get the data returned from the dynamic page, and display.

OK, here's the code:

Since, is running on the static page, we first create a static HTML page, the index.html code list is as follows.

Index.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
< html>
 
 

In the code listing, we loaded an Ajax class library, which can be found in the previous article, "A simple Ajax class library and an example analysis of how to use it."

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

<script type= "Text/javascript" >
  /**
  * setpage (URL) gets data from article.php based on URL
  * @param int pagenum page number 
   * @return String
  /var cache=new Array ();//cache variable, put in cache after data has been accessed, speed up access
  function Setpage (pagenum) {
    var fpage = document.getElementById (' fpage ');//Get Fpage object
    //If there is data in the cache, read directly from the cache, and if there is no data, read from the database. and put the data into the 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>

If you read the above code carefully, you will find the following behavior:

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's xx is to get the page number data,
Setpage (1): is to obtain the 1th page data;
Setpage (2): is to obtain the 2nd page data;
Setpage (100): is to obtain the 100th page data;
......

So how do you get the 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 in the article table; 10 displays 10 $result = $m->fetchall (' article ', ' * ', ', ', ', ', ', ', ', ' $page->limit); ^_^, it's convenient to take out the data. Echo ' <table align= "center" border= "1" width= "1100" style= "Border-collapse:collapse;font-size"
: 14px; "bordercolor=" #666 ">";
Echo ' <caption> 

article.php data is connected to the previous article from Huaqiang Electronic network grabbed the information data, because the data is relatively large, code package download will attach article.sql files, so that everyone 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 is mainly defined by some constants, such as database username, database password, host ..., Database connection class library (Db.class.php) and Database Operations Class library (Model.class.php), please refer to the article " PHP PDO Common Class Library case analysis, with the use of methods.

Program Effect Chart:

The following figure is marked with attention.

In this way, Ajax is done without refreshing the paging. 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 General page-class library.

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

Please download the code to read the details.

Full instance code click here to download the site.

For more information about PHP interested readers can view the site topics: "Php+ajax Tips and Applications Summary", "PHP operation and operator Usage Summary", "PHP Network Programming Skills Summary", "PHP basic Grammar Introductory Course", "PHP operation Office Document Skills Summary ( including word,excel,access,ppt), the "Summary of PHP date and time usage", "PHP Introduction to Object-oriented Programming", "PHP string (String) Usage Summary", "Php+mysql database Operation Tutorial" and " A summary of common PHP database operations tips

I hope this article will help you with the PHP program design.