Detailed explanation of methods and examples of PHP+Ajax implementation of non-refresh paging-PHP Tutorial-php.cn

Detailed explanation of methods and examples of PHP+Ajax implementation of non-refresh paging

墨辰丷

Release： 2023-03-29 16:26:01

Original

2147 people have browsed it

This article mainly introduces the method of PHP Ajax to achieve refresh-free paging. It analyzes in detail the specific steps and related techniques of PHP combined with ajax to achieve refresh-free paging in the form of a complete example. It also comes with demo source code for readers to download for reference. If needed Friends can refer to

Note: Some of the class libraries used here can find their source codes in previous articles, so in order to shorten the length of the article, the links are indicated.

This article explains: Ajax implementation of refresh-free paging, implementation principles, code display, and code download.

Some knowledge needs to be explained here:

1. The benefits of Ajax without refreshing the page: provide a good customer experience, obtain data from the database in the background through Ajax and display it , banning the blank state that appears while waiting for the page to be loaded;

2. So, does the Ajax non-refresh page run on a dynamic page (.php)? Or a static page (.html/.htm/.shtml)? The answer is: static page;

3. Implementation principle: The data returned from the dynamic page is obtained and displayed through the combination of front-end JS script program and Ajax.

Okay, let’s explain the code below:

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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/ajax.js"></script> <!-- 载入 Ajax 类库 -->
<title>Ajax 实现无刷新页面</title>
<style type="text/css">
  body {
    font-size:12px;
  }
</style>
</head>
<body>
  <p id="fpage">数据加载中...</p>
</body>
</html>

Copy after login

In the code list, we have loaded an Ajax class library, which can Found

in the previous article "Analysis of Examples of a Simple Ajax Class Library and Usage Methods". In this static page, only a "Data loading..." will be displayed, and there will be no data. At this time, 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) 根据 url 从 article.php 中获取数据
  * @param int pageNum 页码
  * @return string
  */
  var cache=new Array(); // 缓存变量，当数据被访问过之后放置在缓存中，加快访问速度
  function setPage(pageNum) {
    var fpage = document.getElementById(&#39;fpage&#39;); // 获取 fpage 对象
    // 如果缓存中存在数据，那么直接从缓存中读取；如果不存在数据，那么就从数据库中读取，并把数据存入缓存
    if (typeof(cache[pageNum])==&#39;undefined&#39;) {
      var ajax = Ajax();
      ajax.get(&#39;article.php?page=&#39;+pageNum, function(data){
        fpage.innerHTML = data; // fpage对象的内容是从 article.php 中取来的
        cache[pageNum] = data;
      })
    } else {
      fpage.innerHTML = cache[pageNum];
    }
  }
  setPage(1); // 默认执行
</script>

Copy after login

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

1. setPage(pageNum) is a JS function interface for extracting data from the database;
2. Ajax obtains data through the article.php file;
3. article.php?page=xx, where xx is the page number data to be obtained,
setPage(1): Get the data on page 1;
setPage(2): Get the data on page 2;
setPage(100): Get the data on page 100;
……

So, how to get data from the article.php file? Please see the code listing below.

article.php

<?php
/**
* $Id: article.php
* author Lee.
* Last modify $Date: 2012-01-21 16:53:05 $
*/
require_once &#39;./config.inc.php&#39;;
$m = new Model();
$page = new ajaxPage($m->total(&#39;article&#39;),20); // $m->total(&#39;article&#39;) 获取 article 表的记录数；10为每页显示十条
$result = $m->fetchAll(&#39;article&#39;, &#39;*&#39;, &#39;&#39;, &#39;&#39;, $page->limit); // 取出数据，^_^，很方便吧
echo &#39;<table align="center" border="1" width="1100" style="border-collapse:collapse;font-size:14px;" bordercolor="#666">&#39;;
echo &#39;<caption><h1>华强电子网资讯</h1></caption>&#39;;
echo &#39;<tr height="25"><th>ID</th><th>Title</th><th>Author</th><th>Source</th><th>Date</th></tr>&#39;;
foreach ($result as $v) {
  echo "<tr height=&#39;21&#39;><td align=&#39;center&#39;>{$v[&#39;id&#39;]}</td><td>{$v[&#39;title&#39;]}</td><td align=&#39;center&#39;>{$v[&#39;author&#39;]}</td><td align=&#39;center&#39;>{$v[&#39;source&#39;]}</td><td align=&#39;center&#39;>{$v[&#39;date&#39;]}</td></tr>";
}
echo &#39;<tr><td align="right" colspan="5">&#39;.$page->fpage().&#39;</td></tr>&#39;;
echo &#39;</table>&#39;;
?>

Copy after login

The data connected in article.php is grabbed from Huaqiang Electronics Network in the previous article Because the data is relatively large, the article.sql file will be attached to the code package download for everyone to 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 some constants, such as: database user name, database password, host..., database connection class library (Db.class.php) and database operation class library (Model .class.php), please refer to the article "Analysis of Common PDO Class Library Examples of PHP", with usage instructions.

Program renderings:

The following figure marks the places to pay attention to

In this way, Ajax has no Refresh the pagination and you're done. There is also an ajaxPage.class.php in the program that is not explained. In fact, the usage of this ajaxPage class library is the same as that of the general paging class library.

That is: $page = new ajaxPage (total number of records, number displayed on each page);

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

PHP implements login verification code function and calling method

php中Tips for back-end processing of file upload

PHP method of getting the first image of an article on the website as a thumbnail

The above is the detailed content of Detailed explanation of methods and examples of PHP+Ajax implementation of non-refresh paging. For more information, please follow other related articles on the PHP Chinese website!