Ajax无刷新分页偷懒版（该例子写于YII框架下，其他框架请自行修改部分代码）

最新推荐文章于 2021-08-06 12:33:44 发布

浅曦忆

最新推荐文章于 2021-08-06 12:33:44 发布

阅读量1.8k

点赞数

分类专栏： php 文章标签： ajax 分页无刷新加载

本文链接：https://blog.csdn.net/sinat_29673403/article/details/68486850

版权

php 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

首先，我们来说一下，什么样的操作才叫无刷新，就是页面小部分需要修改的内容被替换，整体页面框架不动的一种操作。那么，我们已经知道了只有部分页面内容会被替换，与其在一个页面里死磕代码，不如把这个页面拆成两个部分页面，一部分用来显示页面不刷新的内容，一部分用来显示页面需要刷新的内容，两个页面拼凑起来就达到我们的效果了。既然这样的话，还做什么无刷新分页，直接把普通的分页提出来自成一个页面，然后让它自己刷去，这样不就好了。
话不多说，基于这个原理，我们来写一个例子：

index.php//列表页
<body>
    <?php $hideNav = true; $hideSumInfo=true;require_once $this->queryLeftNavFile();?>//列表页的顶部导航栏
<div class="f_g"></div>
    <div id="result">
    <?php include_once ('showLeaderTaskResult.php');?>//列表页需要刷新的数据部分
    </div>
        <!--右侧广告浮窗 star-->
<?php  include_once $this->queryShareFile();?>//右侧广告

<!--右侧广告浮窗 end-->
</body>

showLeaderTaskResult.php//需要刷新的数据页面
<div class="middle">
<div class="m_t">
<div class="m_t_f">
<div style="float: left;color:#664187;"><span><?php if(isset($nav)) echo $nav;?>/搜索结果 &gt;</span></div>
                <div style="float: right;color:#999999;"><span>共<span style="color:#f7d034;"><?php echo $zs; ?></span>个结果</span></div>
            </div>
        </div>
    </div>
    <div class="middle">
    <?php $nextUrl = "leaderTask/index?parameter=";$btb_catalogs = 2; include_once($this->querySearchNavFile()); ?>
    <div class="mfm">
      <div class="left" style="width:1240px;">
               <ul style="width:1240px;">
               <?php foreach($leaderTask_infos as $leaderTask_info) {?>
                   <li style="min-height:105px;">
                       <a href="<?php echo SITE_RECEPTION_URL;?>leaderTask/see/leaderTaskId/<?php echo $leaderTask_info["id"];?>" class="fl" style="text-decoration: none;">
                           <div class="demand_bt"><span class="fl"><?php if(isset($leaderTask_info['industry_name'])) echo $leaderTask_info['industry_name']; ?> </span>
                               <font color="#333333"><?php echo $leaderTask_info['title'];?></font>
                           </div>
                       </a>
                   </li>  
            <?php }?>
                </ul>
           </div>
           <!-- yii自带的分页控件，走的就是普通刷新 -->
           <div class="page pageazise" >
                        <?php
                            $this->widget('CLinkPager',array(
                                   'header'=>'',
                                   'firstPageLabel' => '首页',
                                   'lastPageLabel' => '末页',
                                   'prevPageLabel' => '上一页',
                                   'nextPageLabel' => '下一页',
                                   'pages' => $pages,
                                   'maxButtonCount'=>8,
                                    'cssFile'=>false,
                                    'htmlOptions' =>array("class"=>"pagination"),
                                    'selectedPageCssClass'=>"active"
                                )
                             );
                        ?>
                </div>
        </div>
        </div>
<script>
//注意，这里是重点，重写yii框架自带的分页控件的click事件
                $('.pagination a').click(function(){
                    if($(this).parent().hasClass('active'))
                        return false;
                    $.ajax({
                          type: 'POST',
                          url: $(this).attr('href'),
                          data: 'ajax=1',
                          success: function(ret){
                              $('#result').html(ret);
                          }
                        });
                    return false;
                });
</script>

LeaderTaskController//后台控制器中相对应的方法，从数据库中取数据的代码跳过，直接看页面返回的代码
if(isset($_POST['ajax'])){
                if(!empty($arr)){
                    $this->renderPartial('showLeaderTaskResult', array('bisn_infos' => $bisn_infos, 'bisn_i_infos' => $bisn_i_infos, 'bisn_i_info' => $bisn_i_info, 'arr' => $arr, 'leaderTask_infos' => $pag, 'pages'=>$Page['pages'], 'zs'=>$Page['zs'],'dafenlei'=>$dafenlei,'nav'=>$nav));
                }else{
                    $this->renderPartial('showLeaderTaskResult', array('bisn_infos' => $bisn_infos, 'bisn_i_infos' => $bisn_i_infos, 'bisn_i_info' => $bisn_i_info, 'leaderTask_infos' => $pag, 'pages'=>$Page['pages'], 'zs'=>$Page['zs'],'dafenlei'=>$dafenlei,'nav'=>$nav));
                }

看到没有，传统的ajax应该是die()返回数据，然后在回调函数中拼接html。这里直接用renderPartial()方法去生成showLeaderTaskResult页面，将数据填充进去得到没有渲染布局的html内容返回给ajax，这样ajax取到整个showLeaderTaskResult页面html，直接填充到index页面上相应区域就可以了。
是不是很简单的实现方法。懒人请尽管来拿走这篇使用手册，让开发更简洁吧