简单Ajax无刷新分页效果_AJAX相关-js教程-PHP中文网

首页

web前端

js教程

简单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 style="text-align: center">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>";

登录后复制

这里写图片描述

页面是不刷新跳转的，URL不会变，可以看到网站的数据交互

这里写图片描述

以上是简单Ajax无刷新分页效果_AJAX相关的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7662

CakePHP 教程

1393

C# 教程

1205

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

用户遭遇罕见故障三星 Watch 智能手表突现白屏问题 Apr 03, 2024 am 08:13 AM

你可能遇到过智能手机屏幕出现绿色线条的问题，即使没见过，也一定在网络上看到过相关图片。那么，智能手表屏幕变白的情况你遇见过吗？4月2日，CNMO从外媒了解到，一名Reddit用户在社交平台上分享了一张图片，展示了三星Watch系列智能手表屏幕变白的情况。该用户写道："我离开时正在充电，回来时就这样了，我尝试重启，但重启过程中屏幕还是这样。"三星Watch智能手表屏幕变白这位Reddit用户并未指明这款智能手表的具体型号。不过，从图片上看，应该是三星Watch5。此前，另一位Reddit用户也报告

九州风神阿萨辛 4S 散热器评测风冷'刺客大师”范儿 Mar 28, 2024 am 11:11 AM

说起阿萨辛ASSASSIN，相信玩家们一定会想到《刺客信条》中的各位刺客大师，不仅身手了得，而且"躬身于黑暗、服务于光明"的信条，与国内知名机箱/电源/散热器品牌九州风神（DeepCool）旗下的阿萨辛ASSASSIN系列旗舰级风冷散热器不谋而合。最近，该系列的最新产品阿萨辛ASSASSIN4S重磅上线，"西装刺客，再进阶"为高级玩家带来全新的风冷散热体验。外观一览细节满满阿萨辛4S散热器采用双塔构造+单风扇内嵌设计，外面包覆立方体造型的整流罩，整体感极强，并提供白、黑两种配色可选，满足不同色系

春日里的精致光影艺术，哈趣 H2 性价比之选 Apr 17, 2024 pm 05:07 PM

随着春天的到来，万物复苏，一切都充满了生机与活力。在这个美好的季节里，如何为家居生活增添一抹别样的色彩？哈趣H2投影仪，以其精致的设计和超高的性价比，成为了这个春天里不可或缺的一道亮丽风景。这款H2投影仪小巧玲珑却不失时尚。无论是放在客厅的电视柜上，还是卧室的床头柜旁，都能成为一道亮丽的风景线。它的机身采用了奶白色的磨砂质地，这种设计不仅让投影仪的外观更显高级，同时也增加了触感的舒适度。米色仿皮纹材质，更是为整体外观增添了一抹温馨与雅致。这种色彩与材质的搭配，既符合现代家居的审美趋势，又能够融入

航嘉 MX750P 全模组电源评测：750W 的白金实力浓缩 Mar 28, 2024 pm 03:20 PM

ITX平台以小巧的身形吸引了不少追求极致和独特美感的玩家，随着制程的提升和技术的进步，英特尔第14代酷睿和RTX40系显卡都可以在ITX平台中发挥实力，游戏玩家也对SFX电源有了更高的要求。游戏爱好者航嘉推出新的MX系列电源，在满足高性能需求的ITX平台中，MX750P全模组电源的定额功率高达750W，同时通过了80PLUS白金级认证。以下我们就带来这款电源的评测。航嘉MX750P全模组电源采用了简约时尚的设计理念，共有黑白两款供玩家选择，均采用磨砂表面处理，搭配银灰色和红色的字体有很好的质感，

轻松拿捏 4K 高清图像理解！这个多模态大模型自动分析网页海报内容，打工人简直不要太方便 Apr 23, 2024 am 08:04 AM

一个可以自动分析PDF、网页、海报、Excel图表内容的大模型，对于打工人来说简直不要太方便。上海AILab，香港中文大学等研究机构提出的InternLM-XComposer2-4KHD（简写为IXC2-4KHD）模型让这成为了现实。相比于其他多模态大模型不超过1500x1500的分辨率限制，该工作将多模态大模型的最大输入图像提升到超过4K（3840x1600）分辨率，并支持任意长宽比和336像素～4K动态分辨率变化。发布三天，该模型就登顶HuggingFace视觉问答模型热度榜单第一。轻松拿捏

PHP 与 Ajax：构建一个自动完成建议引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax构建自动完成建议引擎：服务器端脚本：处理Ajax请求并返回建议(autocomplete.php)。客户端脚本：发送Ajax请求并显示建议(autocomplete.js)。实战案例：在HTML页面中包含脚本并指定search-input元素标识符。

七彩虹隐星 P15 24 评测：颜值性能兼具的硬核全能游戏本 Mar 06, 2024 pm 04:40 PM

在当下科技飞速发展的时代，笔记本电脑已经成为人们日常生活和工作中不可或缺的重要工具。对于那些对性能有高要求的玩家而言，拥有配置强大、性能出色的笔记本电脑才能满足其硬核需求。七彩虹隐星P15笔记本电脑凭借其卓越性能和令人惊艳的设计，成为了未来的引领者，堪称硬核笔记本的典范。七彩虹隐星P1524配备了13代英特尔酷睿i7处理器和RTX4060LaptopGPU，外观采用更时尚的宇宙飞船设计风格，同时在细节表现上也有出色表现。让我们先来了解一下这款笔记本的特点。至高搭载英特尔酷睿i7-13620H处理

屏幕好打游戏才够爽 iQOO Neo9S Pro+ 屏幕简析 Jul 19, 2024 pm 03:53 PM

在当今智能手机市场中，屏幕素质已经成为衡量一款手机综合性能的关键指标之一。iQOO旗下的Neo系列一直致力于为用户提供出色的游戏体验和视觉享受，最新款产品iQOONeo9SPro+更是采用一块"三好护眼电竞屏"，接下来我们就来一起看看这块屏幕的素质有多出色。iQOONeo9SPro+搭载了一块1.5KOLED电竞直屏，支持从1Hz到144Hz的旗舰级LTPO自适应刷新率，意味着在显示静态内容时能够实现超低功耗的待机状态，而在游戏过程中也能智能切换至90Hz至144Hz的动态高

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题