ホームページ >ウェブフロントエンド >jsチュートリアル >非リフレッシュページングの Ajax 実装サンプルコード

非リフレッシュページングの Ajax 実装サンプルコード

韦小宝オリジナル: 2018-01-01 18:18:171096ブラウズ

この記事では、非リフレッシュページングを実現するための Ajax のサンプルコードを主に紹介します。これは非常に優れており、参考価値があります。ajax に興味のある友人は、非リフレッシュページングを実現するための Ajax のサンプルコードを参照してください。

Ajax ページングを実装するには:

可能であれば、クエリ条件を追加します

ページング用のテーブルを検索します
ページングはページクラスを使用しません
ページを更新する必要はありません
Ajax によるデータの読み込み

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
.dangqian{ background-color:#69F}
</style>
</head>
<body>
<p>
  <input type="text" id="key" />
  <input type="button" value="查询" id="chaxun" />
</p>
<table width="50%" border="1" bordercolordark="0" bordercolorlight="0">
  <tr>
    <td>代号</td>
    <td>名称</td>
    <td>父级代号</td>
  </tr>
  <tbody id="neirong"><!--显示内容-->
  </tbody>
</table>
<p id="fenyexinxi">
</p>
</body>
<script type="text/javascript">
  var page = 1;//定个变量，当前要显示的页
  Load();//加载数据
  Loadfenyexinxi();//加载分页信息
  //查询
  $("#chaxun").click(function(){
    page = 1;
    Load();//加载数据
    Loadfenyexinxi();//加载分页信息
  })
  function Load()
  {
    var key = $("#key").val();//查询条件。用户输入的内容
    $.ajax({
      url:"chuli.php",
      data: {
      page: page,
      key: key
    },//传2个参数一当前页2关键字也就是查询条件
      type:"POST",
      dataType:"JSON",
      success: function(data){//匿名函数
          var str = "";//这个将来要放表格显示的
          for(var k in data)//通过K可以获得每一条数据
          {//加载数据完成
            str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";//要显示的内容，代号、名称父级代号
          }
          $("#neirong").html(str);
      }
    });
  }
function Loadfenyexinxi()//分页信息
{
  var str = "";
  var minys = 1;//最小页数
  var maxys = 1;//最大页数
  var key = $("#key").val();//取关键字用于传到zys页面用
  $.ajax({
    async:false,
    type:"POST",
    url:"fenye.php",
    data:{key:key},
    dataType:"TEXT",
    success:function(d){
        maxys = d;
    }
  });
  str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39;>总共："+maxys+"页</span> ";
  str += "<span id=&#39;prev&#39; style=&#39;text-decoration:underline; cursor:pointer&#39;>上一页</span>";
  for(var i=page-2;i<page+3;i++)
  {
    if(i>=minys && i<=maxys)
    {
      if(i==page)
      {
        str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39; class=&#39;dangqian&#39; bs=&#39;"+i+"&#39;>"+i+"</span> ";
      }
      else
      {
        str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39; class=&#39;list&#39; bs=&#39;"+i+"&#39;>"+i+"</span> ";
      }
    }
  }
  str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39; id=&#39;next&#39;>下一页</span>";
  $("#fenyexinxi").html(str);
  $("#prev").click(function(){
      page = page-1;
      if(page<1)
      {
        page=1;
      }
      Load();
      Loadfenyexinxi();
    })
  $("#next").click(function(){
      page = page+1;
      if(page>maxys)
      {
        page=maxys;
      }
      Load();
      Loadfenyexinxi();
    })
  $(".list").click(function(){
      page = parseInt($(this).attr("bs"));
      Load();
      Loadfenyexinxi();
    })
}
</script>
</html>

上記はこのページです: test.php

<?php
include("DBDA.class.php");
$db = new DBDA();
//把上个页面的2个值传过来
$page = $_POST["page"];//当前页
$key = $_POST["key"];//条件，关键字
$num = 20;//定义，一页里多少条数据，
$tiaoshu = ($page-1)*$num;//$tiaoshu跳过多少条($page-1)*$num现在$num是20条
//写$SQL语句
$sql = "select * from chinastates where areaname like &#39;%{$key}%&#39; limit {$tiaoshu},{$num}";//根据关键字查like &#39;%{$tiaojian}%&#39;。
echo $db->JSONQuery($sql);

上記は処理ページです: chuli.php:

りー

上記はページングページです: fenye.php

以下は表示効果です:

次のページをクリックすると、下に 5 ページが表示され、上に 2 ページがあります。現在のページの左右に表示される情報の数は自分で調整できます。

上のテキストボックスにキーワードを入力すると、関連情報が表示されます。これは、ajax を使用して行うページングです。

上記は編集者が紹介したリフレッシュフリーページングのAjax実装のサンプルコードです。皆さんの参考になれば幸いです。！

非リフレッシュページングの Ajax 実装サンプルコード

関連記事