Note: Some of the class libraries used in this article can find the source code in the previous article. I will specify the link in this article. In order to shorten the article length, We apologize for any inconvenience caused by this reading.
This article explains how to implement a new page without refreshing Ajax, how it works, how code is displayed, and how to download code.
Here we need to explain some knowledge:
1. Benefits of Ajax refreshing pages:Provides a good customer experience. Ajax is used to obtain and display data from the database in the background, and the blank status waiting for page loading is disabled;
2. So, is the Ajax refreshing page running on a dynamic page (. php )? Static Page (.html/. htm/. shtml )? The answer is: static pages;
3. Implementation principle: data returned from dynamic pages is obtained and displayed by combining the front-end JS script program with Ajax.
Okay, the following code is explained:
Since it is running on a static page, we first create a static html page. The code list of index.html 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 list, we loaded an Ajax class library that can be found in the http://blog.csdn.net/china_skag/article/details/37568835 article (with the usage)
On this static page, only one "loading data..." is displayed and there is no data. In this case, we need a JS script to obtain data from the database through Ajax. The JS script is as follows:
<SCRIPT type = "text/JavaScript">/*** setpage (URL. get data in PHP * @ Param int pagenum page number * @ return string */var cache = new array (); // cache variable. when the data is accessed, it is placed in the cache, function setpage (pagenum) {var fpage = document. getelementbyid ('fpage'); // obtain the fpage object // If data exists in the cache, it is directly read from the cache; if no data exists, it is read from the database, and save the data to the cache if (typeof (Cache [pagenum]) = 'undefined') {var Ajax = Ajax (); Ajax. get ('Article. PHP? Page = '+ pagenum, function (data) {fpage. innerhtml = data; // the content of the fpage object is from article. cache [pagenum] = data ;}} else {fpage. innerhtml = cache [pagenum] ;}} setpage (1); // default execution </SCRIPT>
Read the above Code carefully and you will find the following phenomena:1. setpage (pagenum) is a JS function interface that extracts data from the database;
2. Ajax obtains data through the article. php file;
3. Article. php? Page = XX. Here XX is the page number data to be obtained,
Setpage (1): gets 1st page data;
Setpage (2): gets 2nd page data;
Setpage (100): gets 100th page data;
......
So how can we get data from the article. php file? See the following code list.
Article. php
<? PHP/*** $ ID: article. PHP * Author Lee. * Last modify $ Date: 16:53:05 $ */require_once '. /config. inc. PHP '; $ M = new model (); $ page = new ajaxpage ($ M-> total ('Article'), 20 ); // $ M-> total ('Article') obtain the number of records in the article table; 10 shows ten records on each page. $ result = $ M-> fetchall ('Article ', '*', '','', $ page-> limit); // retrieve data, ^ _ ^, echo '<Table align = "center" border = "1" width = "1100" style = "border-collapse: collapse; font-size: 14 Px; "bordercolor =" #666 "> '; echo' <caption>
The data connected in article. php is the information data obtained from Huaqiang electronic network in the previous article, because the data is large,Package and download codeThe article. SQL file will be added for testing.
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 some constants, such as the database username, Database Password, host ......, Database Connection class library (db. Class. php) and database operation class library (model. Class. php). For more information, see http://blog.csdn.net/china_skag/article/details/37568777.
Program:
Note the points of attention.
In this way, Ajax completes without refreshing pages. There is also an ajaxpage. Class. php file in the program. In fact, this ajaxpage class library is used in the same way as the general paging class library.
That is, $ page = new ajaxpage (total number of records, displayed on each page );
For details, please download the code and read it.
Package and download code: [Click to download]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
