ajax無重新整理載入資料

最近做了一個手機端的需求，裡面有一個需要使用到ajax無重新整理載入資料這樣的功能

老樣子先展示所需要實現的功能，

裡面的資料是我的測試資料，隨意了一點，但是能解決問題就行了，不要在意

正題來了：

首頁就是當第一次訪問的資料的時候，頁面會載入出一部分資料，當你點選檢視更多的時候會載入出另外一部分資料

如下圖所示：

這時2資料有七條，仔細看一下第一張圖的資料只有5條

當再次點選的時候按鈕就會變成沒有更多的資訊了，因為我總共新增了七條資料

、

具體的實現手法很簡單就是利用ajax的重新整理載入資料

上程式碼:

1.以為頁面比較簡答，我就只貼一部分比比較重要的了

  按鈕的程式碼：<a href="javascript:void(0);" title="檢視更多" id="imore" class="imore">檢視更多</a>

請記好這個id值   下面還會用到，到時候別說不知道

3.開始js程式碼

  注意：在這裡我使用的jquery的ajax，別忘了在檔案中引入jqery檔案

  程式碼如下：

<script>

  // 首先定義一下page  為  1  因為當也面第一次載入的時候預設載入的資料就是第一頁的資料

    var page = 1;

    function getlist(page) {

       $.ajax({

          type : 'GET',

         //  cateid  這個引數根據自己專案的需求傳參

          ur : '__CONTROLLER__/getlist/' +page+ '/cateid/'+<?php echo I(get.cateid) ?>',

         dataType  'json',

       success : function(data){

        //  data  為請求返回的資料  對data 進行遍歷

       var hrtml = "";

       $(data).each(function(k,v) {

      //  測試使用

         html += '111<br/>';    

});

}

 });

}

// 剛開始載入的時候呼叫該函式

getlist(1);

$('#imore').click(funciton() {

    getlist(++page);

})

</script>

4.後臺處理方法：getlist

   public function getlist($p,$cateid) {

       //  這裡的記載更多其實就是先將資料進行分頁處理

     // 1.每一頁需要顯示多少條資料

    $perpage = 5;

    //   2.每一頁的資料從哪一條開始顯示

   $offset = ($p-1)*$perpage;

   $sql = "select * from cs_article where cateid=$cateid limit $offset,$perpage";

 $art = M();

 $res = $art->query($sql);

  $this->ajaxReturn();

}

ok   主要的就是這麼多