Ajax 페이징 쿼리에 대한 자세한 설명-JS 튜토리얼-php.cn

이 글에서는 Ajax 페이징 쿼리를 구현하는 단계와 방법을 주로 소개합니다. Ajax 학습에 좋은 참고 자료이자 가치가 있습니다. ajax 페이징 쿼리에 대한 자세한 설명을 보려면 편집기를 따라가 보겠습니다.

(1) 먼저 데이터를 표시하는 페이지를 작성합니다.

1 먼저 쿼리 텍스트 상자 입력 및 쿼리 버튼을 누른 다음 코드 작성을 시작합니다

<p>
<input type="text" id="key" /> //输入查询字的文本框
<input type="button" value="查询" id="chaxun" /> //查询按钮，起名字是为了以后给这个按钮加事件，因为只有点击了才可以将文本框的内容进行查询
</p>

로그인 후 복사

효과를 살펴보세요.

2. 데이터를 표시하려면 데이터베이스를 확인해야 하며, ajax 메소드를 사용해야 합니다

먼저 데이터를 표시하는 페이지에 jQuery 패키지를 소개합니다

<script src=". ./jquery-1.11 .2.min.js"></script> //jQuery 패키지 소개<script src="../jquery-1.11.2.min.js"></script> //引入jQuery的包

编写想要显示的列的内容，自然是要写表了，写一行，行中有单元格放想要显示内容的字段名（这里显示3种信息）

<table width="50%" border="1" cellpadding="0" cellspacing="0">
　　<tr><br>　　　　//显示的字段名，这是第一行的内容
  <td>代号</td>
  <td>名称</td>
  <td>父级代号</td>
　　</tr>
　　<tbody id="bg>
<br>　　//这里放的就是查找数据库的内容了
 </tbody>
  
</table>

로그인 후 복사

现在还没有查看数据库，但是可以先看下显示效果：

3.现在可以先来查数据库了，这里就要用到ajax了

3.1不过既然是要分页显示，那么会有个默认的第一页，可以先定个变量

var page = 1; //当前页

3.2然后开始写ajax，查询一下数据库了，但是这个会常用到，避免再写很多遍，我们可以写一个方法

function Load()
{
　　var key = $("#key").val(); //查询条件：因为会用到查询
　　$.ajax({
 url:"fenye_chuli.php", //显示数据的处理页面
 data:{page:page,key:key}, //页数和查询都要传值
 type:"POST",
 dataType:"JSON", //这里我们用JSON的数据格式
 success: function(data){
  //执行完处理页面后写代码
  }
 });
}

로그인 후 복사

3.3再写显示数据的处理页面，这里要考虑的是跳过多少条数据还有想要显示多少条数据

<?php
include("DBDA.class.php"); //调用封装好的类
$db = new DBDA(); //造新对象
$page = $_POST["page"]; //传值页数
$key = $_POST["key"]; //传值关键字<br>
$num = 20; //每页想要显示的数据条数
$tiao = ($page-1)*$num; //显示的当前跳过多少条数据
//查询表中模糊查询名称是关键字，分页是跳过多少条，显示多少条数据
$sql = "select * from chinastates where areaname like &#39;%{$key}%&#39; limit {$tiao},{$num}";
//执行sql语句
echo $db->JSONQuery($sql); //调用的是写好的JSON数据格式的处理方式

로그인 후 복사

JSON数据格式是关联数组，所以要进行处理一下，将处理方式封装成类就好

在“AJAX中的dataType(数据格式)-text、json”中写到过处理方式　

3.4处理页面结束后，就是要写ajax中执行完处理页面后写代码（注意：上面用的是JSON的数据格式，所以要注意字段名要和数据库中的一样，还有就是他是关联数组）

success: function(data){
 var str = "";
 for(var k in data)
 {<br>　　　　　　　//循环显示的代号、名称、父级代号
 　　str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";
 }
 $("#bg").html(str); //将内容放大显示这些数据的地方
}

로그인 후 복사

这样就把想要显示的数据放到bg中了，记得这个方法调用一下

到此就是显示数据了，但是这样没法实现分页，所以还需要分页，这里就是要放数字了，但是也是需要遍历的，随意放空的就可以

<p id="xinxi">
　　//显示数字或是上一页
</p>

로그인 후 복사

3.5这个也是可以写成个方法，然后调用

要知道最大能显示多少页，这里可以先定义一个默认最大数，这个最大数也可以是搜索关键字时显示的最大页数

var maxys = 1;

找到关键字的值

var key = $("#key").val();

然后就是写ajax了，查总页数

$.ajax({
 async:false, //因为这个是要同步执行的，所以值是false
 url:"fenye_zys.php", //处理页面
 data:{key:key}, //想要传的值
 type:"POST", //传值方式
 dataType:"TEXT", //这里可以用TEXT字符串的方式
 success: function(d){
   //处理页面结束后的语句
 }
});

로그인 후 복사

接下里就是写处理信息的处理页面了

<?php
include("DBDA.class.php"); //调用封装好的类
$db = new DBDA();
$key = $_POST["key"]; //将值传过来
$num = 20; //默认显示的条数
$sql = "select count(*) from chinastates where areaname like &#39;%{$key}%&#39;"; //通过关键字查询总条数
$zts = $db->StrQuery($sql);
echo ceil($zts/$num); //转换成整数

로그인 후 복사

处理页面执行结束后，就要把查到的最大页数交个默认的最大页数

success: function(d){
 maxys = d; //将执行结果交给定义的最大页数
}

로그인 후 복사

这样之后就是要有“上一页”“下一页”，中间的数可以让他每次显示5条

str += "<span>总共："+maxys+"页</span> ";
str += "<span id=&#39;prev&#39;>上一页</span>"; //后面要用到单击事件的，在这起个名字
//循环的当前页
str += "<span id=&#39;next&#39;>下一页</span>"; //这个也是要用点击事件的也要起名字

로그인 후 복사

然后再是写循环的页数了

for(var i=page-2;i<page+3;i++) //前后显示2个
{
　　if(i>=minys && i<=maxys) //页数是要有范围的，大于最小页数，小于最大页数
　　{
 if(i==page)
 {
 　　str += "<span class=&#39;dangqian&#39; bs=&#39;"+i+"&#39;>"+i+"</span> "; //当前页选中
 }
　　　　　else
　　　　　{
 　　str += "<span class=&#39;list&#39; bs=&#39;"+i+"&#39;>"+i+"</span> "; //显示当前页
　　　　　}
　　}
}

로그인 후 복사

将值传送到p的xinxi处

$("#xinxi").html(str);

표시하려는 열의 내용을 작성합니다. 당연히 테이블을 작성해야 합니다. . 행에 셀이 있는 행을 작성합니다. 표시하려는 내용의 필드 이름을 입력합니다. (여기에는 세 가지 유형의 정보가 표시됩니다.)

//给上一页添加点击事件
$("#prev").click(function(){
 page = page-1; //当前页减1
 if(page<1)
 {
 　　page=1;
 }
 Load(); //加载数据
 LoadXinXi(); //加载分页信息
})

로그인 후 복사

아직 데이터베이스를 확인하지 않았지만 가져갈 수 있습니다. 먼저 디스플레이 효과를 살펴보세요:

3. 이제 데이터베이스를 먼저 확인할 수 있으며 여기서는 ajax가 사용됩니다

3.1 하지만 페이지 단위로 표시되기 때문에 기본 첫 페이지가 있습니다. 변수를 먼저 설정할 수 있습니다

var page = 1; //현재 페이지< /code><p class="jb51code"></p><span style="color: #0000ff"><p>3.2 그런 다음 ajax 작성을 시작하고 데이터베이스를 쿼리합니다. 하지만 자주 사용되지 않도록 메소드를 작성하면 됩니다</p><p></p><p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/013/745/ee5cdf6600b9f284a84bbeb9a147e568-4.png"/> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">//给下一页加点击事件
$(&quot;#next&quot;).click(function(){
 page = page+1; //当前页加1
 if(page&gt;maxys) 
 {
 　　page=maxys;
 }
 Load(); //加载数据
 LoadXinXi(); //加载分页信息
})</pre><div class="contentsignin">로그인 후 복사</div></div></p><p><strong><span style="color: #0000ff"></strong>3.3 그런 다음 처리 페이지를 작성하여 데이터를 표시합니다. . 여기서 고려해야 할 것은 건너뛸 데이터의 개수와 표시하려는 데이터의 개수입니다</p><p class="jb51code"></p><p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">//给中间的列表加事件
$(&quot;.list&quot;).click(function(){
 page = parseInt($(this).attr(&quot;bs&quot;));
 Load(); //加载数据
 LoadXinXi(); //加载分页信息
})</pre><div class="contentsignin">로그인 후 복사</div></div><p> </p><p style="text-align: center">JSON 데이터 형식은 연관 배열이므로 처리해야 합니다. 처리 방법을 클래스로 캡슐화하면 됩니다. <img alt="" src="https://img.php.cn/upload/article/000/013/745/ee5cdf6600b9f284a84bbeb9a147e568-5.png"/></p>"dataType(data format) in AJAX - text, json"에 처리 방법에 대해 작성했습니다. 🎜🎜<span   style="max-width:90%">🎜3.4 처리 후 페이지 처리를 실행한 후 ajax로 코드를 작성해야 합니다. (참고: 위의 내용은 JSON 데이터 형식을 사용하므로 필드 이름과 데이터베이스에 있는 필드 이름에 주의하세요. 동일하며 다른 점은 연관 배열)🎜🎜🎜🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">(&quot;#chaxun&quot;).click(function(){
 page = 1;
 Load(); //加载数据
 LoadXinXi(); //加载分页信息
})</pre><div class="contentsignin">로그인 후 복사</div></div>🎜🎜🎜이 방법으로 표시하려는 데이터는 bg에 배치됩니다. 이 메서드를 호출하는 것을 잊지 마세요🎜🎜<img alt="" src="https%20://img.%20php.cn/upload/article/000/013/745/ee5cdf6600b9f284a84bbeb9a147e568-2.png">🎜🎜이제 데이터가 표시되지만 이 방법으로는 페이징을 수행할 수 없으므로 페이징이 필요합니다. 여기에서 해야 합니다. 숫자를 입력하지만 통과해야 합니다. 그냥 비워두어도 됩니다🎜🎜🎜rrreee🎜🎜🎜<span   style="max-width:90%">🎜3.5 이것은 메소드로 작성하고 호출할 수도 있습니다🎜 🎜🎜🎜 표시할 수 있는 최대 페이지 수를 확인하려면 먼저 기본 최대 수를 정의할 수 있습니다. 이 최대 수는 키워드 검색 시 표시되는 최대 페이지 수일 수도 있습니다.🎜🎜<code>var maxys = 1;

🎜🎜키워드 찾기 🎜🎜var key = $("#key").val();🎜🎜그 다음 ajax를 작성하고 총 페이지 수를 확인하세요🎜🎜 🎜rrreee🎜🎜🎜그런 다음 작성 정보의 처리 페이지가 처리된 후🎜🎜🎜rrreee🎜🎜🎜처리 페이지 실행이 완료된 후 발견된 최대 페이지 수를 기본 최대 페이지 수로 넘겨야 합니다. 🎜🎜🎜rrreee🎜🎜🎜이후에는 "이전 페이지" 페이지" "다음 페이지"가 있는데 가운데 숫자를 사용하면 매번 5개의 항목을 표시할 수 있습니다 🎜🎜🎜rrreee🎜🎜🎜 그런 다음 페이지 번호를 적습니다. 🎜🎜🎜rrreee🎜🎜🎜의 값을 p의 xinxi로 전송합니다 🎜🎜$("#xinxi").html(str);🎜🎜최종 결과는 다음과 같습니다. 🎜 🎜🎜🎜🎜다음 단계는 이전 페이지와 다음 페이지의 클릭 이벤트입니다. 먼저 이전 페이지의 클릭 이벤트🎜🎜🎜rrreee🎜🎜🎜다음 페이지의 클릭 이벤트🎜🎜🎜rrreee🎜🎜 🎜루프된 숫자에 클릭 이벤트를 추가하세요🎜🎜🎜rrreee🎜🎜🎜마지막으로 모두 호출하세요 🎜🎜🎜🎜🎜🎜4. 키워드 쿼리는 쿼리에 클릭 이벤트를 추가하는 것입니다 🎜🎜🎜🎜rrreee🎜🎜🎜 최종 전체 디스플레이: 🎜🎜🎜🎜

이렇게 하면 페이지를 새로 고치지 않고도 페이징에 표시할 수 있습니다. 전체적인 효과를 살펴보겠습니다

(1) 페이징 표시