Ajax는 페이지를 새로 고치지 않고 페이징 쿼리를 구현합니다.

이번에는 Ajax를 통해 페이지를 새로 고치지 않고 페이징 쿼리를 구현하는 방법을 소개하겠습니다. 페이지를 새로 고치지 않고 Ajax를 통해 페이징 쿼리를 구현할 때 주의해야 할 주의사항은 무엇인가요? 함께 살펴 보겠습니다.

요구 사항:

데이터베이스에서 많은 양의 정보를 얻어 페이지에 표시하려면 페이징 쿼리를 사용해야 합니다.

Ajax를 사용하지 않고 다른 방법을 사용하는 경우에는 페이지 새로고침을 해보세요.

페이징 쿼리 작성은 Ajax 방식을 사용하는 것이 가장 좋습니다.

1. 먼저 데이터가 많은 테이블을 찾아보세요!

jquery 패키지를 소개하는 간단한 테이블

코드:

<script src="jquery-1.11.2.min.js"></script> <script src="jquery-1.11.2.min.js"></script>

写一张表格，显示我们的代号跟名称：

                 

代号	名称	操作

这些都很简单，没毛病！

2.设一个当前页，定义一个变量为1（第一页）：

 var page = 1;
 //当前页，默认等于1

3.下面来写第一个方法：需要用ajax，这个方法主要起查询，且分页的作用：

function load()
 {
 $.ajax({
  url: "jiazai.php",
// 显示所有的数据不用写data
  data:{page:page},
//当前页记得传过去
  type:"POST",
  dataType: "TEXT",
  success: function (data) {
  }
 });
 }

4.去写显示数据的处理页面;这里要考虑的是跳过多少条数据还有想要显示多少条数据，用到limit：

<?php include ("db.class.php");
$db = new db();
$page=$_POST["page"];
//去当前页page
$num = 3;
//每页显示几条
$tg = ($page-1)*3;//跳过几条
$sql = "select * from min limit {$tg},{$num}";
//limit:两个参数，第一个是跳过多少条，第二个是取多少条
echo $db->Query($sql);

做完了第一步，来看看图：

显示数据实现！

好的，每页先是三条数据已经实现了，（页面变成这样我用了美化网页的Bookstrap，前面有讲到）

5.显示分页信息，写一个方法，先用ajax先获取总页数：

function loadfenye()
 {
 var s = "";
 //用于接收
 var xiao = 1;
// 最大页
 var da = 1;
// 最小页
 $.ajax({
 async:false,
//  做成同步
 url:"zys.php",
 dataType:"TEXT",
 success:function(data){
 da = data;
 //最大页数
  }
});
 }

接下来做查询总页数的php页面：

<?php //查询总页数
include ("db.class.php");
$db = new db();
$sql = "select count(*) from min";
$zts = $db->strquery($sql);
//总条数
echo ceil($zts/3);
//ceil向上取整

好啦，总页数获取到了，回来把分页写完吧：

//加载分页信息方法
 function loadfenye()
 {
  var s = "";
  //用于接收
  var xiao = 1;
//  最大页
  var da = 1;
//  最小页
  $.ajax({
 async:false,
//   做成同步
 url:"zys.php",
 dataType:"TEXT",
 success:function(data){
  da = data;
  //最大页数，查到的最大页数交个默认的最大页数
   }
});
//加载上一页
  s += "

«

"; //  加载分页列表 for(i=page-4;i=xiao && i"+i+""  } }   //  加载下一页   s += "

»

"; $("#fenye").html(s);  }

这样写完了以后，来看图：

分页的信息也显示出来了

6.来把默认选中页数的背景色来改变一下吧

看一下Bookstrap；改背景色的方法吧：

很显然是多了一个active的样式，我们用判断给加上吧

if(i>=xiao && i<a>" + i + "</a>"
  }
  else {
   s += " 

" + i + "

";   }

好了，看一下：

可以，没毛病

7.做页数的点击事件，实现点击页数跳转到该页数并显示数据，还要更新列表；

先给数字列表加上一个class

s += " <li class="'active" list><a>" + i + "</a></li>"

然后写方法：

//给列表加上点击事件
  $(".list").click(function(){
   //改变当前页数
   //把点击的页数，扔给page（当前页）
   page = $(this).text();
//   page获取了当前页，重新加载以下方法
   //调用load方法
   load();
   //把加载数据封装成一个方法
   loadfenye();
   //加载分页信息方法
  })
 }

当我点击第五页：

没毛病；

8.再来就是上一页和下一页的点击事件了，首先是上一页的点击事件：

首先在上一页的列表里加上class，便于写事件：

s += "<li class="'sy'"><a>«</a></li>";

우리의 코드명과 이름을 보여주는 테이블을 작성하세요:

$(".sy").click(function(){
   //改变当前页
   if(page>1)
   {
    //如果不是第一页
    page = parseInt(page) - 1;
   }
   //   page获取了当前页，重新加载以下方法
   //调用load方法
   load();
   //把加载数据封装成一个方法
   loadfenye();
   //加载分页信息方法
  })

이것들은 매우 간단합니다. 문제 없습니다!

2. 변수를 1로 정의합니다(첫 번째 페이지):

🎜

//下一页点击事件
  $(".xy").click(function(){
//   alert(da);
   if(page<da>🎜🎜3. 첫 번째 방법을 작성해 보겠습니다. 이 방법은 주로 쿼리 및 페이징에 사용됩니다. 🎜🎜<pre class="brush:php;toolbar:false"><p>
 <input>
 <input>
</p>

🎜🎜4. 데이터 표시를 위한 처리 페이지를 작성합니다. 여기서 고려해야 할 것은 건너뛸 데이터 조각 수와 표시할 데이터 조각 수입니다. 🎜🎜

//给查询加点击事件
 $("#chaxun").click(function(){
  //重新加载
  //调用load方法
  load();
  //把加载数据封装成一个方法
  loadfenye();
  //加载分页信息方法
 })

🎜완료 후. 첫 번째 단계, 오세요 사진을 보세요: 🎜🎜 🎜🎜데이터 구현을 보여주세요! 🎜🎜자, 페이지당 처음 3개의 데이터가 구현되었습니다. (앞서 언급한 것처럼 페이지를 이렇게 보이게 하기 위해 Bookstrap을 사용했습니다.) 🎜🎜🎜5. 페이징 정보를 표시하고 메소드를 작성합니다. ajax를 사용하여 먼저 가져옵니다. 총 페이지 수: 🎜🎜

data:{page:page,name:name},
   type:"POST",

🎜 다음으로, PHP 페이지에서 총 페이지 수를 확인하세요. 🎜

data:{name:name},
 type:"POST",

🎜좋아요, 총 페이지 수를 얻었으니 돌아와서 페이지 매김 작성을 마치세요. 🎜

$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
 $name = $_POST["name"];
 $tj = " name like '%{$name}%' ";
}

🎜이 글을 쓴 후 사진을 보세요: 🎜🎜🎜🎜페이징 정보도 표시됩니다🎜🎜 🎜6. 기본 선택 페이지의 배경색을 변경해 보겠습니다. 🎜🎜🎜 Bookstrap 배경색 변경 방법을 살펴보세요. 🎜🎜🎜🎜분명히 추가 활성 스타일이 있으니 판단에 따라 추가해 보겠습니다🎜

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 <meta>
 <title>无标题文档</title>
 <link>
 <script></script>
 <script></script>
<style>
 .xq{
  margin-left: 5px;
 }
 #fenye li:hover{
  cursor:pointer ;
 }
</style>


<h1 id="显示数据">显示数据</h1>
<p>
 <input>
 <input>
</p>
<br>

                    

代号	名称	操作

 

 

  

   

    ×     

详情

       

   

   

    关闭    

     <script> var page = 1; //当前页，默认等于1 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 //给查询加点击事件 $("#chaxun").click(function(){ //重新加载 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 }) function loadfenye() { var s = ""; //用于接收 var name = $("#name").val(); var xiao = 1; // 最大页 var da = 1; // 最小页 $.ajax({ async:false, // 做成同步 url:"zys.php", data:{name:name}, type:"POST", dataType:"TEXT", success:function(data){ da = data; //最大页数 } }); //加载上一页 s += "<li class=&#39;sy&#39;><a>«"; // 加载分页列表 for(var i=page-4;i<page+5;i++) { //i代表列表的页数 if(i>=xiao && i<=da) { if (i == page) { s += " <li class=&#39;active list&#39;><a>" + i + "" } else { s += " <li class=&#39;list&#39;><a>" + i + ""; } } } // 加载下一页 s += "<li class=&#39;xy&#39;><a>»"; $("#fenye").html(s); //给列表加上点击事件 $(".list").click(function(){ //改变当前页数 //把点击的页数，扔给page（当前页） page = $(this).text(); // page获取了当前页，重新加载以下方法 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 }) //上一页点击事件 $(".sy").click(function(){ //改变当前页 if(page>1) { //如果不是第一页 page = parseInt(page) - 1; } // page获取了当前页，重新加载以下方法 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 }) //下一页点击事件 $(".xy").click(function(){ // alert(da); if(page<da) { //如果不是第一页 page = parseInt(page) + 1; } // page获取了当前页，重新加载以下方法 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 }) } function load() { var name = $("#name").val(); $.ajax({ url: "jiazai.php", // 显示所有的数据不用写data data:{page:page,name:name}, type:"POST", dataType: "TEXT", success: function (data) { var str = ""; var hang = data.split("|"); //split拆分字符串 for (var i = 0; i < hang.length; i++) { //通过循环取到每一行;拆分出列； var lie = hang[i].split("-"); str = str + "<tr><td>" + lie[0] + "<td>" + lie[1] + "<td>" + "<button type=&#39;button&#39; class=&#39;btn btn-info sc&#39; ids=&#39;"+lie[0]+"&#39;>点击删除<button type=&#39;button&#39; class=&#39;btn btn-primary xq&#39; ids=&#39;"+lie[0]+"&#39;>查看详情" + //ids里面存上主键值 ""; } $("#td").html(str); //找到td把html代码扔进去 addshanchu(); addxiangqing(); } }); } //给查看详情加事件 function addxiangqing() { $(".xq").click(function(){ $(&#39;#myModal&#39;).modal(&#39;show&#39;) //打开模态框 var ids = $(this).attr("ids"); $.ajax({ url:"xiangqing.php", data:{ids:ids}, dataType:"TEXT", type:"POST", success:function(data){ //拆分 var lie = data.split("^"); // var str = "<p>代号:"+lie[0]+"<p>名称:"+lie[1]""; //造字符串 var str = "<p>代号："+lie[0]+"<p>名称："+lie[1]+""; $("#nr").html(str); } }); //在模态框里面要显示的内容 }) } //把删除事件封装成方法： function addshanchu() { //给删除按钮加上事件 $(".sc").click(function () { var ids = $(this).attr("ids"); $.ajax({ url: "shanchu.php", data: {ids: ids}, dataType: "TEXT", type: "POST", success: function (d) { if (d.trim() == "ok") { alert("删除成功"); //调用加载数据的方法 load(); } else { alert("删除失败"); } } }); }) } </script>🎜좋아, 살펴보세요:🎜🎜🎜🎜알겠습니다. 문제 없습니다🎜 🎜🎜7. 페이지 수 클릭 이벤트를 만들고, 페이지 번호를 클릭하면 해당 페이지 번호로 이동하여 데이터가 표시되고, 목록이 업데이트됩니다. 🎜🎜🎜먼저 번호 목록에 클래스를 추가하세요🎜🎜s + = " <li class="active list"><a>" + i + "</a></li>"🎜🎜그런 다음 메소드를 작성하세요: 🎜

<?php //查询总页数
include ("db.class.php");
$db = new db();
$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
 $name = $_POST["name"];
 $tj = " name like &#39;%{$name}%&#39; ";
}
$sql = "select count(*) from min WHERE {$tj} ";
$zts = $db->strquery($sql);
//总条数
echo ceil($zts/3);
//ceil向上取整

🎜를 클릭하면 다섯 번째 페이지에서: 🎜🎜🎜🎜문제 없습니다. 🎜🎜8. 그러면 이전 페이지와 다음 페이지가 있습니다. 한 페이지에 클릭 이벤트가 있습니다. 첫 번째는 이전 페이지의 클릭 이벤트입니다. 🎜🎜🎜먼저, 용이하게 하기 위해 이전 페이지의 목록에 클래스를 추가합니다. 이벤트 작성: 🎜🎜s += "<li class="sy "><a>«</a></li>";🎜🎜어서 이벤트를 클릭하세요. 이전 페이지: 🎜

<?php include ("db.class.php");
$db = new db();
$page=$_POST["page"];
//去当前页page
$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
 $name = $_POST["name"];
 $tj = " name like &#39;%{$name}%&#39; ";
}
$num = 3;
//每页显示几条
$tg = ($page-1)*3;//跳过几条
$sql = "select * from min where {$tj} limit {$tg},{$num}";
//limit:两个参数，第一个是跳过多少条，第二个是取多少条
$arr = $db->Query($sql);
//遍历
$str="";
foreach ($arr as $v)
{
 $str = $str.implode("-",$v)."|";
 //用-把$v拼起来,拼出来是1-红2-蓝,用|分割，拼出来是1-红|2-蓝|
}
$str = substr($str,0,strlen($str)-1);
//截取字符串：从第0个开始，截取它的长度-1
//strlen获取字符串长度
echo $str;

🎜다음 페이지의 클릭 이벤트: 🎜🎜위와 동일: 목록에 추가 쓰기 이벤트를 촉진하기 위한 클래스 추가: 🎜

s += "<li class="'xy'"><a>»</a></li>"; 

下一页点击事件：

//下一页点击事件
  $(".xy").click(function(){
//   alert(da);
   if(page<da><p style="text-align: left;">好，完美实现ajax分页查询；</p>
<p style="text-align: left;"><strong>8.再加一个按条件查询：</strong></p>
<p style="text-align: left;">加上文本框：</p>
<pre class="brush:php;toolbar:false"><p>
 <input>
 <input>
</p>

来写点击事件：

//给查询加点击事件
 $("#chaxun").click(function(){
  //重新加载
  //调用load方法
  load();
  //把加载数据封装成一个方法
  loadfenye();
  //加载分页信息方法
 })

接下来我们需要改一下这两个方法：

ajax只需要把文本框的name传过去就好啦：

data:{page:page,name:name},
   type:"POST",

data:{name:name},
 type:"POST",

在处理页面，设置一个恒等的条件：

$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
 $name = $_POST["name"];
 $tj = " name like '%{$name}%' ";
}

最后在sql语句后面调用就好啦

图：

页面不刷新的分页查询就欧克了；

源码：

显示页面：

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 <meta>
 <title>无标题文档</title>
 <link>
 <script></script>
 <script></script>
<style>
 .xq{
  margin-left: 5px;
 }
 #fenye li:hover{
  cursor:pointer ;
 }
</style>


<h1 id="显示数据">显示数据</h1>
<p>
 <input>
 <input>
</p>
<br>

                    

代号	名称	操作

 

 

  

   

    ×     

详情

       

   

   

    关闭    

     <script> var page = 1; //当前页，默认等于1 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 //给查询加点击事件 $("#chaxun").click(function(){ //重新加载 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 }) function loadfenye() { var s = ""; //用于接收 var name = $("#name").val(); var xiao = 1; // 最大页 var da = 1; // 最小页 $.ajax({ async:false, // 做成同步 url:"zys.php", data:{name:name}, type:"POST", dataType:"TEXT", success:function(data){ da = data; //最大页数 } }); //加载上一页 s += "<li class=&#39;sy&#39;><a>«"; // 加载分页列表 for(var i=page-4;i<page+5;i++) { //i代表列表的页数 if(i>=xiao && i<=da) { if (i == page) { s += " <li class=&#39;active list&#39;><a>" + i + "" } else { s += " <li class=&#39;list&#39;><a>" + i + ""; } } } // 加载下一页 s += "<li class=&#39;xy&#39;><a>»"; $("#fenye").html(s); //给列表加上点击事件 $(".list").click(function(){ //改变当前页数 //把点击的页数，扔给page（当前页） page = $(this).text(); // page获取了当前页，重新加载以下方法 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 }) //上一页点击事件 $(".sy").click(function(){ //改变当前页 if(page>1) { //如果不是第一页 page = parseInt(page) - 1; } // page获取了当前页，重新加载以下方法 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 }) //下一页点击事件 $(".xy").click(function(){ // alert(da); if(page<da) { //如果不是第一页 page = parseInt(page) + 1; } // page获取了当前页，重新加载以下方法 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 }) } function load() { var name = $("#name").val(); $.ajax({ url: "jiazai.php", // 显示所有的数据不用写data data:{page:page,name:name}, type:"POST", dataType: "TEXT", success: function (data) { var str = ""; var hang = data.split("|"); //split拆分字符串 for (var i = 0; i < hang.length; i++) { //通过循环取到每一行;拆分出列； var lie = hang[i].split("-"); str = str + "<tr><td>" + lie[0] + "<td>" + lie[1] + "<td>" + "<button type=&#39;button&#39; class=&#39;btn btn-info sc&#39; ids=&#39;"+lie[0]+"&#39;>点击删除<button type=&#39;button&#39; class=&#39;btn btn-primary xq&#39; ids=&#39;"+lie[0]+"&#39;>查看详情" + //ids里面存上主键值 ""; } $("#td").html(str); //找到td把html代码扔进去 addshanchu(); addxiangqing(); } }); } //给查看详情加事件 function addxiangqing() { $(".xq").click(function(){ $(&#39;#myModal&#39;).modal(&#39;show&#39;) //打开模态框 var ids = $(this).attr("ids"); $.ajax({ url:"xiangqing.php", data:{ids:ids}, dataType:"TEXT", type:"POST", success:function(data){ //拆分 var lie = data.split("^"); // var str = "<p>代号:"+lie[0]+"<p>名称:"+lie[1]""; //造字符串 var str = "<p>代号："+lie[0]+"<p>名称："+lie[1]+""; $("#nr").html(str); } }); //在模态框里面要显示的内容 }) } //把删除事件封装成方法： function addshanchu() { //给删除按钮加上事件 $(".sc").click(function () { var ids = $(this).attr("ids"); $.ajax({ url: "shanchu.php", data: {ids: ids}, dataType: "TEXT", type: "POST", success: function (d) { if (d.trim() == "ok") { alert("删除成功"); //调用加载数据的方法 load(); } else { alert("删除失败"); } } }); }) } </script>

查询总页数的页面：

<?php //查询总页数
include ("db.class.php");
$db = new db();
$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
 $name = $_POST["name"];
 $tj = " name like &#39;%{$name}%&#39; ";
}
$sql = "select count(*) from min WHERE {$tj} ";
$zts = $db->strquery($sql);
//总条数
echo ceil($zts/3);
//ceil向上取整

加载分页信息的页面：

<?php include ("db.class.php");
$db = new db();
$page=$_POST["page"];
//去当前页page
$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
 $name = $_POST["name"];
 $tj = " name like &#39;%{$name}%&#39; ";
}
$num = 3;
//每页显示几条
$tg = ($page-1)*3;//跳过几条
$sql = "select * from min where {$tj} limit {$tg},{$num}";
//limit:两个参数，第一个是跳过多少条，第二个是取多少条
$arr = $db->Query($sql);
//遍历
$str="";
foreach ($arr as $v)
{
 $str = $str.implode("-",$v)."|";
 //用-把$v拼起来,拼出来是1-红2-蓝,用|分割，拼出来是1-红|2-蓝|
}
$str = substr($str,0,strlen($str)-1);
//截取字符串：从第0个开始，截取它的长度-1
//strlen获取字符串长度
echo $str;

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何给使用Ajax返回的标签动态添加样式

ajax的校验功能怎样用SSM整合框架实现

위 내용은 Ajax는 페이지를 새로 고치지 않고 페이징 쿼리를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!