pjax的实战应用

本文通过实例代码介绍了PHP中使用Pjax进行局部页面刷新的方法,包括前端jQuery的pjax设置,以及后端判断是否为Pjax请求并返回对应模板的处理方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<div>
 2     <p>这是首页</p>
 3 
 4     <div>
 5         <a data-pjax url="/home/Index/data" href="javascript:;">点击加载人员名单</a>
 6     </div>
 7     <div id="pjax-container">
 8 
 9     </div>
10 </div>
11 <script type="text/javascript">
12    $(function(){
13         //点击加载pjax方法
14         $('a[data-pjax]').click(function cilckss(){
15             var url=$(this).attr('url');//获取url
16             $.pjax({ url:url , container: '#pjax-container' });
17         })
18    })
19 </script>
复制代码

后台控制器:

复制代码
  1 /**
  2  * @return bool
  3  * 判断是否为pjax请求
  4  */
  5 protected function is_pjax(){
  6    return array_key_exists('HTTP_X_PJAX', $_SERVER)
  7    && $_SERVER['HTTP_X_PJAX'] === 'true';
  8 }
  9 /**
 10  * 返回pjax请求的数据
 11  * 注意:pjax只能返回html页面模版,不能输出字符串
 12  * 包含phalcon自带分页
 13  */
 14 
 15 public function dataAction(){
 16    $this->view->disable();
 17 
 18    $currentPage = $this->request->getQuery("page","int",1);
 19    $robots = UserModel::lists();
 20    $paginator = new PaginatorModel(
 21       [
 22          "data"  => $robots,
 23          "limit" => 10,
 24          "page"  => $currentPage,
 25       ]
 26    );
 27    $page = $paginator->getPaginate();
 28    if($this->is_pjax()){//判断是否是pjax请求
 29 
 30       $this->sss($page);//局部模版
 31    }else{
 32        $this->fff($page);//全局模版
 33    }
 34 }
 35 
 36 /**
 37  * @param $page
 38  * pjax请求的局部模版
 39     * 回传后css及js失效,需在后台处理
 40  */
 41 public function sss($page){
 42 ?>
 43    <table class="table">
 44       <thead>
 45       <tr>
 46          <th>id</th>
 47          <th>姓名</th>
 48          <th>年龄</th>
 49          <th>性别</th>
 50          <th>身高</th>
 51          <th>体重</th>
 52       </tr>
 53       </thead>
 54       <?php foreach ($page->items as $item) { ?>
 55          <tbody class="body-table">
 56          <tr>
 57             <td><?php echo $item->id; ?></td>
 58             <td><?php echo $item->name; ?></td>
 59             <td><?php echo $item->age; ?></td>
 60             <td><?php echo $item->gender; ?></td>
 61             <td><?php echo $item->height; ?></td>
 62             <td><?php echo $item->weight; ?></td>
 63          </tr>
 64          </tbody>
 65       <?php } ?>
 66    </table>
 67 
 68    <a data-pjax url="/home/Index/data?page=1" href="javascript:;">首页</a>
 69    <a data-pjax url="/home/Index/data?page=<?= $page->before; ?>" href="javascript:;">上一页</a>
 70    <a data-pjax url="/home/Index/data?page=<?= $page->next; ?>" href="javascript:;">下一页</a>
 71    <a data-pjax url="/home/Index/data?page=<?= $page->last; ?>" href="javascript:;">尾页</a>
 72 
 73    <?php echo "你当前在第", $page->current, "页, 共 ", $page->total_pages,"页"; ?>
 74    <script type="text/javascript">
 75       $(function(){
 76          $('a[data-pjax]').click(function(){
 77             var url=$(this).attr('url')
 78             $.pjax({ url:url , container: '#pjax-container' })
 79          })
 80       })
 81    </script>
 82 <?php
 83 }
 84 
 85 /**
 86  * @param $page
 87  * 如果F5强制刷新,将重载整个页面
 88  */
 89 
 90 public function fff($page){
 91 ?>
 92       <!DOCTYPE html>
 93       <html lang="en">
 94       <head>
 95          <meta charset="UTF-8">
 96          <meta http-equiv="X-UA-Compatible" content="IE=edge">
 97          <meta name="viewport" content="width=device-width, initial-scale=1">
 98          <title></title>
 99          <script type="text/javascript" src="/public/jquery.js"></script>
100          <script type="text/javascript" src="/public/jquery.pjax.js"></script>
101 
102          <script type="text/javascript" src="/public/bootstrap/js/bootstrap.min.js"></script>
103          <link rel="stylesheet" href="/public/bootstrap/css/bootstrap.min.css">
104       </head>
105       <body>
106       <div>
107          <p>这是首页</p>
108 
109          <div>
110             <a data-pjax url="/home/Index/data" href="javascript:;">点击加载人员名单</a>
111          </div>
112          <div id="pjax-container">
113             <?php
114             $this->sss($page);
115             ?>
116          </div>
117       </div>
118       </body>
119       </html>
120 <?php
121 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值