首先介绍下这个功能的用途,这是用在点击文章分类,异步加载所属该类文章列表。相信在很多网站上,都会用到这个功能。主要步骤是将ajax加载的文章列表数据放到一个中转的news_ajax.html文件中,然后再通过json将该新闻列表页面转换成字符串,最后再返回给js里面的getnews方法。下面我们就来看看详细代码

点击分类html,其中id就是分类表的id

 <ul class="menulb">
   <foreach name="tylist" item="v">
   <li><a id="{$v['id']}"  onclick="getnews(this)" href="#">{$v['name']}</a></li>
   </foreach>
 </ul>

getnews方法

 <script>
 //ajax根据分类获取新闻列表
 function getnews(obj){
    var id=obj.id;
    $.ajax({
         type:"POST",
         url:"news_ajax",
         data:"id="+id,
         dataType:"json",
         success:function(data){
          if(data.status=='yes'){
             $('#newszone').html(data.str)
          }else{
             $('#newszone').html('没有该分类!');
          }
         },

       });
     }
   </script>

php中的news_ajax方法

//异步加载消息列表
   public function news_ajax(){
     if(isset($_POST['id'])){
       $id=$_POST['id'];
       $list=$this->newsModle->where('nid='.$id)->order('time asc')->select();
       if(empty($list)){
         echo json_encode(array('msg'=>'该分类不存在','status'=>'no'));
       }else{
         foreach ($list as $key => $value) {
           $list[$key]['day']=date("d",$value['time']);
           $list[$key]['yearmonth']=date("Y",$value['time']).'-'.date("m",$value['time']);
         }
         $this->assign('list',$list);// 赋值分页输出
         $str=$this->fetch('news_ajax');//把页面转换成字符串
         echo json_encode(array('msg'=>'该分类存在','status'=>'yes','str'=>$str));
       }
     }
   }

news_ajax.html页面

<ul class="nieslit">
     <foreach name="list" item="v">
         <li class="hideshow on">
           <a href="{:U('Index/newsdetail',array('id'=>$v['id']))}" title="{$v['title']}" >
               <div class="pic">
                   <img class="lazy" width="380" height="208" data-original="{$v['pic']}" src="{$v['pic']}">
               </div>
               <div class="text">
                   <div class="txt clearfix">
                       <span>
                           <h1>{$v['day']}</h1>
                           <h5>{$v['yearmonth']}</h5>
                       </span>
                       <div class="td">
                           <h3>{$v['title']}</h3>
                           <p>
                               {$v['description']}
                           </p>
                       </div>
                   </div>
                   <div class="tx clearfix">
                       <em>了解详情</em>
                       <i></i>
                   </div>
                </div>
            </a>
        </li>
     </foreach>
   </ul>

原文章列表页面

  <div class="clearfix layout" id="newszone">
           <ul class="nieslit">
             <foreach name="list" item="v">
                 <li class="hideshow">
                   <a href="{:U('Index/newsdetail',array('id'=>$v['id']))}" title="{$v['title']}" >
                       <div class="pic">
                           <img class="lazy" width="380" height="208" data-original="{$v['pic']}">
                       </div>
                       <div class="text">
                           <div class="txt clearfix">
                               <span>
                                   <h1>{$v['day']}</h1>
                                   <h5>{$v['yearmonth']}</h5>
                               </span>
                               <div class="td">
                                   <h3>{$v['title']}</h3>
                                   <p>
                                       {$v['description']}
                                   </p>
                               </div>
                           </div>
                           <div class="tx clearfix">
                               <em>了解详情</em>
                               <i></i>
                           </div>
                        </div>
                    </a>
                </li>
             </foreach>
        </ul>
    </div>

其中里面里面有个id="newszone",就是把news_ajax页面数据放到这个div下面,至此,一个完整的jQuery ajax异步加载案例就完成了