pjax的实战应用

拼搏现实的明天。 2022-06-07 22:46 151阅读 0赞

<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>

![复制代码][copycode.gif]

后台控制器：

![复制代码][copycode.gif]

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 }

[copycode.gif]: /images/20220608/905b09127904487680fd9785d29ebe24.png