社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
Ajax无刷新分页效果
首頁 web前端 js教程 簡單Ajax無刷新分頁效果_AJAX相關

簡單Ajax無刷新分頁效果_AJAX相關

微波
微波
Jun 28, 2017 pm 02:02 PM
ajax 分頁 效果

這篇文章主要為大家詳細介紹了簡單實現Ajax無刷新分頁效果的程式碼，具有一定的參考價值，有興趣的小夥伴們可以參考一下

Ajax無刷新分頁效果，如下程式碼實作

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Ajax无刷新分页效果</title>

 <script type="text/javascript">
 function showpage(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
   document.getElementById("result").innerHTML = xhr.responseText;
  }
  }

  xhr.open(&#39;get&#39;,url);
  xhr.send(null);
 }

 window.onload = function () {
  showpage(&#39;page.php&#39;);
 }
 </script>
</head>
<body>
  <h2 id="Ajax无刷新分页效果">Ajax无刷新分页效果</h2>
  <p id="result"></p>
</body>
</html>
登入後複製

網路上找的分頁程式碼，親測可用~

/*
* Created on 2011-07-28
* Author : LKK , http://lianq.net
* 使用方法：
require_once(&#39;mypage.php&#39;);
$result=mysql_query("select * from mytable", $myconn);
$total=mysql_num_rows($result); //取得信息总数
pagepide($total,10); //调用分页函数

//数据库操作
$result=mysql_query("select * from mytable limit $sqlfirst,$shownu", $myconn);
while($row=mysql_fetch_array($result)){
...您的操作
}
echo $pagecon; //输出分页导航内容
*/

//if(!function_exists("pagepide")){
#$total 信息总数
#$shownu 显示数量,默认20
#$url 本页链接
 function pagepide($total,$shownu=20,$url=&#39;&#39;){

#$page 当前页码
#$sqlfirst mysql数据库起始项
#$pagecon 分页导航内容
 global $page,$sqlfirst,$pagecon,$_SERVER;
 $GLOBALS["shownu"]=$shownu;

 if(isset($_GET[&#39;page&#39;])){
  $page=$_GET[&#39;page&#39;];
 }else $page=1;

#如果$url使用默认,即空值,则赋值为本页URL
 if(!$url){ $url=$_SERVER["REQUEST_URI"];}

#URL分析
 $parse_url=parse_url($url);
 @$url_query=$parse_url["query"]; //取出在问号?之后内容
 if($url_query){
  $url_query=preg_replace("/(&?)(page=$page)/","",$url_query);
  $url = str_replace($parse_url["query"],$url_query,$url);
  if($url_query){
  $url .= "&page";
  }else $url .= "page";
 }else $url .= "?page";

#页码计算
 $lastpg=ceil($total/$shownu); //最后页,总页数
 $page=min($lastpg,$page);
 $prepg=$page-1; //上一页
 $nextpg=($page==$lastpg ? 0 : $page+1); //下一页
 $sqlfirst=($page-1)*$shownu;

#开始分页导航内容
 $pagecon = "显示第 ".($total?($sqlfirst+1):0)."-".min($sqlfirst+$shownu,$total)." 条记录，共 <B>$total</B> 条记录";
 if($lastpg<=1) return false; //如果只有一页则跳出

// if($page!=1) $pagecon .=" <a href=&#39;$url=1&#39;>首页</a> "; else $pagecon .=" 首页 ";
// if($prepg) $pagecon .=" <a href=&#39;$url=$prepg&#39;>前页</a> "; else $pagecon .=" 前页 ";
// if($nextpg) $pagecon .=" <a href=&#39;$url=$nextpg&#39;>后页</a> "; else $pagecon .=" 后页 ";
// if($page!=$lastpg) $pagecon.=" <a href=&#39;$url=$lastpg&#39;>尾页</a> "; else $pagecon .=" 尾页 ";

 if($page!=1) $pagecon .=" <a href=&#39;javascript:showpage(\"$url=1\")&#39;>首页</a> "; else $pagecon .=" 首页 ";
 if($prepg) $pagecon .=" <a href= &#39;javascript:showpage(\"$url=$prepg\")&#39;>前页</a> "; else $pagecon .=" 前页 ";
 if($nextpg) $pagecon .=" <a href= &#39;javascript:showpage(\"$url=$nextpg\")&#39;>后页</a> "; else $pagecon .=" 后页 ";
 if($page!=$lastpg) $pagecon.=" <a href= &#39;javascript:showpage(\"$url=$lastpg\")&#39;>尾页</a> "; else $pagecon .=" 尾页 ";

#下拉跳转列表,循环列出所有页码
// $pagecon .="　到第 <select name=&#39;topage&#39; size=&#39;1&#39; onchange=&#39;window.location=\"$url=\"+this.value&#39;>\n";
 $pagecon .="　到第 <select name=&#39;topage&#39; size=&#39;1&#39; onchange=&#39;showpage(\"$url=\"+this.value)&#39;>\n";
 for($i=1;$i<=$lastpg;$i++){
  if($i==$page) $pagecon .="<option value=&#39;$i&#39; selected>$i</option>\n";
  else $pagecon .="<option value=&#39;$i&#39;>$i</option>\n";
 }
 $pagecon .="</select> 页，共 $lastpg 页";

 return $page;
 }
//}else die(&#39;pagepide()同名函数已经存在!&#39;);
登入後複製

以下是我自己做的一個簡單分頁展示

<?php

 header("Content-type:text/html; charset=utf-8");
 $link = mysqli_connect(&#39;localhost&#39;,&#39;root&#39;,&#39;123&#39;,&#39;good&#39;);
if (!$link)
{
 die("连接错误: " . mysqli_connect_error());
}

$sql = "SELECT * FROM ecs_category";
$qry = mysqli_query($link,$sql);
$total = mysqli_num_rows($qry);
$per = 10;

$page = pagepide($total,$per);

$sql = "SELECT cat_id,cat_name FROM category limit $sqlfirst,$shownu";
 $result = mysqli_query($link,$sql);

 //$goods = mysqli_fetch_all($result,MYSQLI_ASSOC);

 //mysqli_free_result($result);

echo <<<eof
 <style type="text/css">
 table{width:500px;margin:auto;border: 1px solid black; border-collapse:collapse;text-align:center;}
 td{border: 1px solid black;}
 </style>
 <table>
  <tr><td>序号</td><td>商品编号</td><td>商品类型</td></tr>
eof;

 $num = ($page - 1) * $per;
// foreach ($goods as $k => $v) {
 while($goods = mysqli_fetch_assoc($result)){
 echo "<tr>";
 echo "<td>".++$num."</td>";
 echo "<td>$goods[cat_id]</td>";
 echo "<td>$goods[cat_name]</td>";
 echo "</tr>";
 }

 echo "<tr><td colspan=&#39;3&#39;>$pagecon</td></tr>";
 echo "</table>";
登入後複製

簡單Ajax無刷新分頁效果_AJAX相關

#頁面是不刷新跳轉的，URL不會變，可以看到網站的資料互動

簡單Ajax無刷新分頁效果_AJAX相關

#

以上是簡單Ajax無刷新分頁效果_AJAX相關的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD
Inzoi：如何申請學校和大學
4 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前 By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7830
15
Java教學
1648
14
CakePHP 教程
1402
52
Laravel 教程
1300
25
PHP教程
1239
29
顯示更多
Related knowledge
用戶遭遇罕見故障 三星 Watch 智慧手錶突現白螢幕問題 用戶遭遇罕見故障 三星 Watch 智慧手錶突現白螢幕問題 Apr 03, 2024 am 08:13 AM

你可能遇到過智慧型手機螢幕出現綠色線條的問題，即使沒看過，也一定在網路上看過相關圖片。那麼，智慧手錶螢幕變白的情況你有遇見過嗎？ 4月2日，CNMO從外媒了解到，一名Reddit用戶在社群平台上分享了一張圖片，展示了三星Watch系列智慧手錶螢幕變白的情況。該用戶寫道："我離開時正在充電，回來時就這樣了，我嘗試重啟，但重啟過程中屏幕還是這樣。"三星Watch智能手錶屏幕變白這位Reddit用戶並未指明這款智能手錶的具體型號。不過，從圖片上看，應該是三星Watch5。此前，另一位Reddit用戶也報告

九州風神阿薩辛 4S 散熱器評測 風冷「刺客大師」範兒 九州風神阿薩辛 4S 散熱器評測 風冷「刺客大師」範兒 Mar 28, 2024 am 11:11 AM

說起阿薩辛ASSASSIN，相信玩家們一定會想到《刺客信條》中的各位刺客大師，不僅身手了得，而且"躬身於黑暗、服務於光明"的信條，與國內知名機箱/電源/散熱器品牌九州風神（DeepCool）旗下的阿薩辛ASSASSIN系列旗艦級風冷散熱器不謀而合。最近，該系列的最新產品阿薩辛ASSASSIN4S重磅上線，"西裝刺客，再進階"為高級玩家帶來全新的風冷散熱體驗。外觀一覽細節滿滿阿薩辛4S散熱器採用雙塔構造+單風扇內嵌設計，外麵包覆立方體造型的整流罩，整體感極強，並提供白、黑兩種配色可選，滿足不同色系

輕鬆拿捏 4K 高畫質影像理解！這個多模態大模型自動分析網頁海報內容，打工人簡直不要太方便 輕鬆拿捏 4K 高畫質影像理解！這個多模態大模型自動分析網頁海報內容，打工人簡直不要太方便 Apr 23, 2024 am 08:04 AM

一個可以自動分析PDF、網頁、海報、Excel圖表內容的大模型，對於打工人來說簡直不要太方便。上海AILab，香港中文大學等研究機構提出的InternLM-XComposer2-4KHD（簡寫為IXC2-4KHD）模型讓這一切成為了現實。相較於其他多模態大模型不超過1500x1500的分辨率限制，該工作將多模態大模型的最大輸入影像提升到超過4K（3840x1600）分辨率，並支援任意長寬比和336像素～4K動態解析度變化。發布三天，模型就登頂HuggingFace視覺問答模型熱度排行榜第一。輕鬆拿捏

航空嘉 MX750P 全模組電源評測：750W 的白金實力濃縮 航空嘉 MX750P 全模組電源評測：750W 的白金實力濃縮 Mar 28, 2024 pm 03:20 PM

ITX平台以小巧的身形吸引了許多追求極致和獨特美感的玩家，隨著製程的提升和技術的進步，英特爾第14代酷睿和RTX40系顯卡都可以在ITX平台中發揮實力，遊戲玩家也對SFX電源有了更高的要求。遊戲愛好者航空嘉推出新的MX系列電源，在滿足高效能需求的ITX平台中，MX750P全模組電源的定額功率高達750W，同時通過了80PLUS白金級認證。以下我們就帶來這款電源的評測。航嘉MX750P全模組電源採用了簡約時尚的設計理念，共有黑白兩款供玩家選擇，均採用磨砂表面處理，搭配銀灰色和紅色的字體有很好的質感，

PHP 與 Ajax：建立一個自動完成建議引擎 PHP 與 Ajax：建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。

春日裡的精緻光影藝術，哈趣 H2 性價比之選 春日裡的精緻光影藝術，哈趣 H2 性價比之選 Apr 17, 2024 pm 05:07 PM

隨著春天的到來，萬物復甦，一切都充滿了生命與活力。在這個美好的季節裡，如何為居家生活增添一抹別樣的色彩？哈趣H2投影儀，以其精緻的設計和超高的性價比，成為了這個春天裡不可或缺的一道亮麗風景。這款H2投影機小巧玲瓏卻不失時尚。無論是放在客廳的電視櫃上，或是臥室的床頭櫃旁，都能成為一道明亮的風景線。它的機身採用了奶白色的磨砂質地，這種設計不僅讓投影機的外觀更顯高級，同時也增加了觸感的舒適度。米色仿皮紋材質，更為整體外觀增添了一抹溫馨與雅緻。這種色彩與材質的搭配，既符合現代家居的美感趨勢，又能融入

七彩虹隱星 P15 24 評測：顏值性能兼具的硬蕊全能遊戲本 七彩虹隱星 P15 24 評測：顏值性能兼具的硬蕊全能遊戲本 Mar 06, 2024 pm 04:40 PM

在當下科技快速發展的時代，筆記型電腦已成為人們日常生活和工作中不可或缺的重要工具。對於那些對性能有高要求的玩家而言，擁有配置強大、性能出色的筆記型電腦才能滿足其硬核需求。七彩虹隱星P15筆記型電腦憑藉其卓越性能和令人驚豔的設計，成為了未來的引領者，堪稱硬核筆記本的典範。七彩虹隱星P1524配備了13代英特爾酷睿i7處理器和RTX4060LaptopGPU，外觀採用更時尚的太空船設計風格，同時在細節表現上也有出色表現。讓我們先來了解這款筆記本的特點。至高搭載英特爾酷睿i7-13620H處理

螢幕好打遊戲才夠爽 iQOO Neo9S Pro+ 螢幕簡析 螢幕好打遊戲才夠爽 iQOO Neo9S Pro+ 螢幕簡析 Jul 19, 2024 pm 03:53 PM

在當今智慧型手機市場中，螢幕素質已成為衡量一款手機綜合性能的關鍵指標之一。 iQOO旗下的Neo系列一直致力於為用戶提供出色的遊戲體驗和視覺享受，最新款產品iQOONeo9SPro+更是採用一塊"三好護眼電競屏"，接下來我們就來一起看看這塊屏幕的素質有多出色。 iQOONeo9SPro+搭載了一塊1.5KOLED電競直屏，支援從1Hz到144Hz的旗艦級LTPO自適應刷新率，意味著在顯示靜態內容時能夠實現超低功耗的待機狀態，而在遊戲過程中也能智能切換至90Hz至144Hz的動態高

See all articles