PHP7留言板開發之 Ajax分頁
php7教學欄位介紹留言板開發中的Ajax分頁
推薦（免費）：php7教學
有了基礎頁面的支撐，想要提高頁面的使用者體驗，那麼非同步的資料載入目前來說是最好的處理方式了。 Ajax分頁是練手的最佳應用場景，運用到的知識點，在上課老友記之PHP7留言板開發（Ajax異步提交）已經有了一定的介紹，這裡就不再敖述，如有明白請看上節內容。
教學分解
-
1、定義
JavaScript具有基於函數的作用域，只要定義了，目前頁面的是全域可用的，標識就是gotopage(){}函數gotopage。 -
2、Ajax非同步操作
上課的內容，這裡最要是非同步請求的時候注意是GET方式，ajax.php#是非同步請求服務端需要處理的邏輯文件，接收使用者翻頁請求，回傳回應頁數的資料即可（當然其他格式的內容就行，例如JSON，這裡就不講解）。 3、JS列印資料
innerHTML
#在指定的頁面區域列印翻頁資料<ul id= "list_box"><u/>，這裡的樣式結構是要在ul標籤內輸出內容，所以用JS選擇器document.getElementById("list_box")，取得ul標籤的對象，然後運用其中的innerHTML屬性賦值內容，完成我們想要的結果document.getElementById("list_box").innerHTML = '伺服器返回的資料';
4、JS循環
for的運用，遍歷所有頁碼並標識目前頁碼
用選擇器取得所有的頁面物件var pageno = document.getElementsByClassName('pageno');
計算總頁碼數量pageno.length#for循環遍歷直到匹配到目前使用者請求的page頁碼數即當前頁，匹配成功就為目前頁數添加樣式（標識目前請求成功的頁數）。
本教學基於老友記之PHP7留言板開發（分頁）內容上改變。
HTML程式碼list.php
<?php
include 'config.php';
$page = !empty($_GET['page'])?intval($_GET['page']):1;
$keyword = !empty($_GET['keyword'])?strip_tags($_GET['keyword']):'';
$pagesize = 6;
// 统计总记录数，便于计算出总页数
if(!empty($keyword)){
$sql = "SELECT * FROM feedback WHERE name LIKE '%{$keyword}%'";
}else{
$sql = "SELECT * FROM feedback";
}
$result = mysqli_query($mysqli, $sql);
$total = mysqli_affected_rows($mysqli);
$total_page = ceil($total/$pagesize); // 进一法取整获取总页数
// 开始分页查询，根据page计算偏移量
$offset = ($page - 1) * $pagesize;
if(!empty($keyword)){
$sql = "SELECT * FROM feedback WHERE name LIKE '%{$keyword}%' LIMIT {$offset}, {$pagesize}";
}else{
$sql = "SELECT * FROM feedback LIMIT {$offset}, {$pagesize}";
}
$result = mysqli_query($mysqli, $sql);
$lists = array();
while($rows = mysqli_fetch_array($result)){
$lists[] = $rows;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>异步翻页+列表带搜索功能_留言板_科科分享</title>
<!-- 2.新建css样式文件并根据效果图编写css代码 -->
<link rel="stylesheet" href="feedback.css">
<script>
function gotopage(page, keyword){
if(page<0){
page = 1;
}
// 创建 XMLHttpRequest 对象
var ajax, url;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else{
// 兼容Internet Explorer（IE5 和 IE6）使用 ActiveX 对象
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
url = 'page.php?page=' + page + '&keyword=' + keyword;
ajax.open('GET', url, true);
ajax.send();
ajax.onreadystatechange = function(){
// 获取服务器响应状态码
if(ajax.readyState == 4 && ajax.status==200){
// 获取服务器返回的响应返回的数据
var retdata = ajax.responseText;
// 如果返回的时候不为空的时候，就输出
if(retdata){
// 这里是将异步请求的数据 在指定区域（list_box）展示给用户看
document.getElementById("list_box").innerHTML = retdata;
// 最后将页面中的定位当前分页数，告诉用户当前在哪个分页
// 这里相对逻辑会复杂点，慢慢领会
// 第一步获取所有分页数的集合
var pageno = document.getElementsByClassName('pageno');
// 这里用到for循环遍历 从多个分页的集合获取当前用户点击的那个分页链接并添加样式active
for(var i=0; i<pageno.length; i++){
pageno[i].className = 'pageno';
// parseInt(i)+1意思是当前分页,
if(parseInt(i)+1 == page){
pageno[i].className = 'pageno active';
}
}
}
}
}
}
</script>
</head>
<body>
<!-- 工作区，呈现给用户看的 -->
<!-- 1.开始搭建脚手架 -->
<p class="container_box">
<p class="up">
<h3 class="title">留言板</h3>
<h5 class="subtitle">LIST</h5>
</p>
<p class="down list">
<p class="search">
<form action="list.php">
关键词：<input type='text' name="keyword" value="<?php echo $keyword?>" />
<input type="submit" value="去搜索">
</form>
</p>
<ul id="list_box">
<?php
foreach($lists as $item){
?>
<li>姓名：<?php echo $item['name']?> 联系方式：<?php echo $item['contact']?> 内容：<?php echo $item['content']?></li>
<?php
}
?>
</ul>
<p class="pages">
<ul>
<?php
for($p = 1; $p<=$total_page; $p++){
?>
<li class="pageno"><a href="javascript:gotopage(<?php echo $p?>, '<?php echo $keyword?>');"><?php echo $p?></a></li>
<?php
}
?>
</ul>
</p>
</p>
</p>
</body>
</html非同步分頁程式碼page.php
<?php
include 'config.php';
$page = !empty($_GET['page'])? intval($_GET['page']):1;
$keyword = !empty($_GET['keyword'])?addslashes(strip_tags($_GET['keyword'])):'';
$pagesize = 6;
// 开始分页查询，根据page计算偏移量
$offset = ($page - 1) * $pagesize;
if(!empty($keyword)){
$sql = "SELECT * FROM feedback WHERE name LIKE '%{$keyword}%' LIMIT {$offset}, {$pagesize}";
}else{
$sql = "SELECT * FROM feedback WHERE 1 LIMIT {$offset}, {$pagesize}";
}
$result = mysqli_query($mysqli, $sql);
$lists = array();
$list = '';
while($rows = mysqli_fetch_array($result)){
$list .= "<li>姓名：". $rows['name']." 联系方式：". $rows['contact']." 内容：".$rows['content']."</li>";
}
echo $list;
exit;總結
以上是PHP7留言板開發之 Ajax分頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
php7.0安裝了插件還是顯示未安裝怎麼辦
Apr 02, 2024 pm 07:39 PM
解決 PHP 7.0 中插件未顯示已安裝問題的方法：檢查插件配置並啟用插件。重新啟動 PHP 以套用配置變更。檢查插件檔案權限，確保其正確。安裝遺失的依賴項，以確保插件正常運作。如果其他步驟都失敗，則重建 PHP。其他可能原因包括外掛程式版本不相容、載入錯誤版本或 PHP 配置問題。
php7.0怎麼安裝mongo擴展
Nov 21, 2022 am 10:25 AM
php7.0安裝mongo擴充的方法：1、建立mongodb使用者群組和使用者；2、下載mongodb原始碼包，並將原始碼包放到“/usr/local/src/”目錄下；3、進入“src/”目錄；4、解壓縮原始碼包；5、建立mongodb檔案目錄；6、將檔案複製到「mongodb/」目錄；7、建立mongodb設定檔並修改設定即可。
php7檢測tcp埠不好用怎麼解決
Mar 22, 2023 am 09:30 AM
在php5中，我們可以使用fsockopen()函數來偵測TCP埠。這個函數可以用來開啟一個網路連接和進行一些網路通訊。但是在php7中，fsockopen()函數可能會遇到一些問題，例如無法開啟連接埠、無法連接到伺服器等。為了解決這個問題，我們可以使用socket_create()函數和socket_connect()函數來偵測TCP埠。
PHP 伺服器環境常見問題指南：快速解決常見難題
Apr 09, 2024 pm 01:33 PM
PHP伺服器環境常見的解決方法包括：確保已安裝正確的PHP版本和已複製相關檔案到模組目錄。暫時或永久停用SELinux。檢查並配置PHP.ini，確保已新增必要的擴充功能和進行正確設定。啟動或重新啟動PHP-FPM服務。檢查DNS設定是否有解析問題。
php7.0怎麼安裝部署
Nov 30, 2022 am 09:56 AM
php7.0安裝部署的方法：1、到PHP官網下載與本機系統對應的安裝版本；2、將下載的zip檔案解壓縮到指定目錄；3、開啟命令列窗口，在「E:\php7」目錄下運行“php -v”命令即可。
如何在系統重啟後自動設置unixsocket的權限？
Mar 31, 2025 pm 11:54 PM
如何在系統重啟後自動設置unixsocket的權限每次系統重啟後，我們都需要執行以下命令來修改unixsocket的權限：sudo...
在Docker環境中使用PECL安裝擴展時為什麼會報錯？如何解決？
Apr 01, 2025 pm 03:06 PM
在Docker環境中使用PECL安裝擴展時報錯的原因及解決方法在使用Docker環境時，我們常常會遇到一些令人頭疼的問�...
記錄一次用strace診斷php佔用系統資源過高的問題
May 03, 2024 pm 04:31 PM
本機環境：redhat6.7系統。 nginx1.12.1，php7.1.0，程式碼使用yii2框架問題：本地的web站需要用到elasticsearch服務。當php使用本機伺服器搭建的elasticsearch時，本地的負載都是正常。當我使用aws的elasticsearchservice服務時，本地伺服器出現負載經常過高的情況。查看nginx和php日誌，發現沒有異常。系統的並發連線數也不高。這時候想到我們老闆跟我講的一個strace診斷工具。偵錯過程：找一個php的子程序idstrace-
