ThinkPHP AJAX分頁及JS緩存的應用

時間 2019-11-18

標籤 thinkphp ajax 分頁緩存應用欄目 PHP 简体版

原文原文鏈接

//AJAX分頁詳見兄弟連PHP項目視頻教程22講35分鐘左右
主要實現是須要將分頁中的每一個連接都改成AJAX請求

//前端緩存技術：基於javascript傳輸的數據，只要瀏覽器沒關，都保存在內存中
//實現方法：建立一個數組，將須要緩存的數據保存在數組中，須要使用時調用便可；參加兄弟連PHP項目視頻22第45分鐘左右
var cache=new Array(); //建立一個用於緩存的數組
function setpage(index,data) {
if (!cache[index]) { //當緩存不存在時，則進行緩存
cache[index]=data;
}else { //緩存存在時，則讀取緩存
xxx=cache[index];
}
}

1、控制器中分配顯示主頁面javascript

public function index(){
$this->assign('time',time());  //頁面按需進行查詢-分配等就行，不須要對分頁數據進行查詢
$this->display();
}

注：主頁不須要對分頁數據進行查詢html

2、在主頁中建立一個DIV容器用於展現分頁內容前端

一、HTML需求java

{$time}  //分頁之外的數據，這些數據不會受分頁的影響
<div id='ajaxpage'>  //分頁容器
<div class='page' style='display:none;'><a href="{:U('ajaxPage',array('p'=>1))}" title="">自動點擊執行AJAX請求顯示第一頁內容</a></div>  //須要建立一個連接，用於向AJAX分頁自動發送第一頁的請求
</div>

注：須要本身建立一個連接，指向分頁控制器，並傳入p=1；這個連接的做用是用jquery自動點擊獲取第一頁數據；HTML的構造須要和分頁的相同，這樣jquery的AJAX請求才能正常獲取a標籤信息；如這裏的構造是class=page裏的a，與分頁連接相同jquery

二、JQuery需求ajax

var cache=new Array(); //--建立一個用於緩存的數組，用於前端JS數據緩存
//這是分頁中各個分頁的AJAX請求
$(function(){
$('#ajaxpage').on('click','.page a',function () { //使用on()進行動態綁定事件；非動態是$('.page a').click()；on()裏的第二個參數是AJAX中動態綁定的選擇器，而$('#ajaxpage')選取AJAX外的合適的DOM，一般是包 過AJAX內容的那個DOM
var url=$(this).attr('href');   //取得分頁a標籤連接地址，正好是要提交的控制器和傳參：Index/ajaxPage/p/1
if (cache[url]) { //--若是緩存存在，則讀取緩存
$('#ajaxpage').html(cache[url]);
}else { //不然進行ajax請求
$.ajax({
type: "GET",
url:url,    //請求URL
success:function(data){
$('#ajaxpage').html(data);     //將分頁控制器輸出的模版加載到容器中
cache[url]=data; //--將返回的數據存入緩存
//alert(url);  //開啓這裏能夠判斷緩存是否生效
}
});
}
return false;     //使a標籤失效，防止頁面跳轉
});
});

注：必須用on進行動態綁定；接收返回的數據直接使用html()加載進模版指定的位置，不用對數據進行HTML格式組合數組

//須要先使用trigger當頁面加載完自動點擊一次建立的連接，完成首頁數據的AJAX請求
$(function () {
$('.page a').trigger('click');
});
注：須要寫在AJAX請求代碼的下面；模擬點擊的時候，就會請求上面的AJAX了

3、控制器中分頁查詢瀏覽器

public function ajaxPage(){
$question = M("question");
import('ORG.Util.Page'); //引入分頁類
$count = $question->where('question_category = 49 AND status = 0')->count(); //查詢出總條數
$page=new Page($count,10); //$count:總條數，10：每頁顯示條數$page->lastSuffix = false;
//設置分頁類，這裏設置的是最下面那排分頁數據的樣式
$Page->rollPage = 3; //頁面顯示的頁數，默認是5
$page->setConfig('header','條記錄');  //設置顯示的文字，這5項都使用的默認值
$page->setConfig('prev','上一頁');
$page->setConfig('next','下一頁');
$page->setConfig('first','首頁');
$page->setConfig('last','尾頁');
$page->setConfig('theme',"<b>共%totalRow%%header% %nowPage%/%totalPage% 頁 %first% %prePage% %upPage% %linkPage% %downPage% %nextPage% %end%</b>"); //設置顯示的具體內容，能夠在這裏使用HTML CSS等樣式
$limit=$page->firstRow.','.$page->listRows; //調用分頁類的屬性；肯定查詢的數據是從第幾個開始取，取出多少個
$list = $question->field('question_price,question_id,question_startTime,question_name,question_title,pay')->where('question_category = 49 AND status = 0')->order('question_startTime DESC')->limit($limit)->select();//使用field()方法取出須要的字段，order()方法排 序，limit()方法決定取出的數據
$this->list=$list; //分配給模版，等同於assign()
$this->assign('page',$page->show()); //將分頁類分配給模版
$this->display();  //這裏直接使用display()而不是ajaxReturn()
}

注：這裏就只對分頁內容進行查詢，並使用display()輸出模版，而不是ajaxReturn()返回數據緩存

4、分頁內容顯示函數

<foreach name='list' item='v'>
<tr>
<td>{$v['question_price']}</td>
<td>{$v['pay']}</td>
<td>{$v['question_title']}</td>
<td>{$v['question_name']}</td>
<td>{$v['question_startTime']|date='Y-m-d H:i:s',###}</td>
<td><a href="{:U('uptStatus',array('oldSta'=>'0','status'=>'1','id'=& gt;$v['question_id']))}">退回</a>/<a href="{:U('uptStatus',array('oldSta'=>'0','status'=>'2','id'=& gt;$v['question_id']))}">經過</a>/<a href="{:U('uptStatus',array('oldSta'=>'0','status'=>'8','id'=>$v['question_id']))}" onclick='return confirm("你肯定刪除嗎？")'>回收站</a></td>
</tr>
</foreach>
<tr>
<td colspan="6" class='page'>  //這裏的class=page和首次點擊的結構相同
{$page}
</td>
</tr>

注：這裏的HTML只要分頁的標籤便可，不能有<html><body>這些標籤

結語：這樣的好處是將分頁內容以模版形式構建，而不須要在AJAX請求的回調函數中構建，JS裏寫HTML各類蛋疼啊~由於是模擬點擊獲取的分頁內容，因此在第一次頁面加載完成時分頁內容的顯示會稍有延遲；固然，也能夠在首頁中就將分頁第一頁查詢出來分配給模版並顯示，但這樣代碼就會重複不少；也能夠在後臺將分頁查詢進行封裝，前臺使用<include>包含分頁模版，這就看我的需求了