首先介绍下这个功能的用途，这是用在点击文章分类，异步加载所属该类文章列表。相信在很多网站上，都会用到这个功能。主要步骤是将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异步加载案例就完成了