PHP+Ajax实现的无刷新分页功能的方法-tutorial php-php.cn

Rumah

pembangunan bahagian belakang

tutorial php

PHP+Ajax实现的无刷新分页功能的方法

墨辰丷

May 21, 2018 am 09:41 AM

phpphp+ajaxFungsi

这篇文章主要介绍了PHP+Ajax实现的无刷新分页功能,结合具体实例形式分析了php+ajax通过pdo操作类读取数据库并分页显示的相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

具体如下：

注：本文中使用到的一些类库在前面文章都能找到源代码，我会在文中指明链接所在，为了缩短文章篇幅，由此带来的阅读不便，敬请谅解。

本文讲解 Ajax 实现无刷新分页、实现原理、代码展示、代码下载。

这里需要说明一些知识：

1、Ajax 无刷新页面的好处：提供良好的客户体验，通过 Ajax 在后台从数据库中取得数据并展示，取缔了等待加载页面而出现的空白状态；

2、那么，Ajax 无刷新页面是运行在动态页面（.php）？还是静态页面（.html/.htm/.shtml）？答案是：静态页面；

3、实现原理：通过前端 JS 脚本程序与 Ajax 相结合取得从动态页面返回的数据，并显示。

好了，下面进行代码讲解：

既然，是运行在静态页面上，我们首先先创建一个静态 HTML 页面，index.html 的代码清单如下。

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>

代码清单中，我们加载了一个 Ajax 类库，在这个静态页面中，只会显示一个“数据加载中....”，并没有任何数据。这时，我们就需要一个 JS 脚本来实现通过 Ajax 从数据库中获取数据。JS 脚本如下：

<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>

仔细阅读上面的代码，您会发现下面现象：

1、setPage(pageNum) 是一个从数据库中提取数据的 JS 函数接口；
2、Ajax 是通过 article.php 文件来获取数据；
3、article.php?page=xx，这里的 xx 就是所要取得的页码数据，
setPage(1)：就是取得第1页数据；
setPage(2)：就是取得第2页数据；
setPage(100)：就是取得第100页数据；
……
那么，如何从 article.php 文件中取得数据呢？请看下面代码清单。

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;;
?>

article.php 中连接的数据是前面文章从华强电子网抓来的资讯数据，因为数据比较大，代码打包下载中会附加 article.sql 文件，以便大家测试。

静态页面 index.html 上显示的数据就是 article.php 文件中 echo 的代码。

代码文件中的 config.inc.php 文件主要就是定义一些常量，比如：数据库用户名、数据库密码、主机……，数据库连接类库（Db.class.php）和数据库操作类库（Model.class.php）。

程序效果图：

下图标注的是注意关注的地方。

这样，Ajax 无刷新分页就完成了。程序中还有一个 ajaxPage.class.php 没有说明，其实，这个 ajaxPage 类库的使用方法和一般的分页类库是一样的。

即：

$page = new ajaxPage(记录总数, 每页显示数);

相关推荐：

简单实现Ajax无刷新分页效果

php ajax无刷新分页,支持id定位示例代码

简单Ajax无刷新分页效果_AJAX相关

Atas ialah kandungan terperinci PHP+Ajax实现的无刷新分页功能的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Apakah perbezaan antara masa tamat sesi mutlak dan terbiar?May 03, 2025 am 12:21 AM

Timeout sesi mutlak bermula pada masa penciptaan sesi, sementara waktu tamat sesi terbiar bermula pada masa operasi pengguna. Tamat masa sesi mutlak sesuai untuk senario di mana kawalan ketat kitaran hayat sesi diperlukan, seperti aplikasi kewangan; Timeout sesi terbiar sesuai untuk aplikasi yang mahu pengguna menyimpan sesi mereka aktif untuk masa yang lama, seperti media sosial.

Apakah langkah yang akan anda ambil jika sesi tidak berfungsi di pelayan anda?May 03, 2025 am 12:19 AM

Kegagalan sesi pelayan boleh diselesaikan dengan mengikuti langkah -langkah: 1. Semak konfigurasi pelayan untuk memastikan sesi ditetapkan dengan betul. 2. Sahkan kuki klien, sahkan bahawa penyemak imbas menyokongnya dan hantar dengan betul. 3. Periksa perkhidmatan penyimpanan sesi, seperti Redis, untuk memastikan bahawa mereka beroperasi secara normal. 4. Semak kod aplikasi untuk memastikan logik sesi yang betul. Melalui langkah -langkah ini, masalah perbualan dapat didiagnosis dengan berkesan dan diperbaiki dan pengalaman pengguna dapat diperbaiki.

Apakah kepentingan fungsi session_start ()?May 03, 2025 am 12:18 AM

session_start () iscrucialinphpformanaginguserSessions.1) itinitiatesanewsessionifnoneexists, 2) resumeSanexistingsession, dan3) setSasessionCookieforcontinuityAcrossrequests, enableingApplicationeUseUshenticationandPersonalConizedConizedContentContentContentContentContentContentContentContentContentContentContentC.

Apakah kepentingan menetapkan bendera httponly untuk cookies sesi?May 03, 2025 am 12:10 AM

Menetapkan bendera httponly adalah penting untuk cookies sesi kerana ia dapat mencegah serangan XSS dengan berkesan dan melindungi maklumat sesi pengguna. Khususnya, 1) bendera httponly menghalang JavaScript daripada mengakses kuki, 2) bendera boleh ditetapkan melalui setcookies dan make_response dalam php dan flask, 3) walaupun ia tidak dapat dicegah dari semua serangan, ia harus menjadi sebahagian daripada dasar keselamatan keseluruhan.

Masalah apa yang diselesaikan oleh sesi php dalam pembangunan web?May 03, 2025 am 12:02 AM

PhpsSesionssolveThublemofMainTainStateAsmultipHttprequestsByStoringDataontheserverArverArsociatingWithauniquesession.1) merekaSTOREdataServer-sisi, biasanya

Data apa yang boleh disimpan dalam sesi PHP?May 02, 2025 am 12:17 AM

Phpsessionscanstorestrings, nombor, tatasusunan, andobjects.1.strings: textdatalikeusernames.2.numbers: integersorfloatsforcounters.3.Arrays: ListsLikeshoppingCarts.4.Objects: complextructureSturesthatareserialized.

Bagaimana anda memulakan sesi PHP?May 02, 2025 am 12:16 AM

Tostartaphpsession, usesession_start () atthescript'sbeginning.1) placeitbeforeanyoutputtosetthesessioncookie.2) usesessionsforusererdatalikeloginstatusorshoppingcarts.3)

Apakah regenerasi sesi, dan bagaimanakah ia meningkatkan keselamatan?May 02, 2025 am 12:15 AM

Penjanaan semula sesi merujuk kepada menjana ID sesi baru dan membatalkan ID lama apabila pengguna melakukan operasi sensitif dalam kes serangan tetap sesi. Langkah-langkah pelaksanaan termasuk: 1. Mengesan Operasi Sensitif, 2. Menjana ID Sesi Baru, 3. Memusnahkan ID Sesi Lama, 4. Kemas kini maklumat sesi pengguna.

See all articles