快捷導(dǎo)航

利用ThinkPHP內(nèi)置的ThinkAjax實(shí)現(xiàn)異步傳輸技術(shù)的實(shí)現(xiàn)方法

更新時(shí)間：2011年12月19日 01:25:05 作者：

ThinkPHP的官方文檔沒(méi)有給出ThinkAjax的使用方法，令很多初學(xué)者使用起來(lái)有些不便，今天學(xué)到這里，也碰到了很多問(wèn)題，花時(shí)間深究下，做個(gè)學(xué)習(xí)筆記，希望能對(duì)初學(xué)者有幫助

準(zhǔn)備工作：
① 首先要會(huì)使用ThinkPHP這個(gè)框架
② 最好有些ajax的基礎(chǔ)（可以去看下小飛的另外一篇博文：Ajax實(shí)時(shí)驗(yàn)證"用戶名/郵箱等"是否已經(jīng)存在）
③ 4個(gè)js文檔（點(diǎn)此免積分下載）

先貼上源代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="__PUBLIC__/js/base.js"></script> 
<script type="text/javascript" src="__PUBLIC__/js/prototype.js"></script> 
<script type="text/javascript" src="__PUBLIC__/js/mootools.js"></script> 
<script type="text/javascript" src="__PUBLIC__/js/Ajax/ThinkAjax.js"></script> 
<script type="text/javascript"> 
function checktitle() 
{ 
ThinkAjax.send('__URL__/checktitle','ajax=1&title='+$('title').value,'','checkbox'); 
} 
</script> 
<form action="__URL__/insert" method="post" id="myform"> 
<table> 
<tbody> 
<tr> 
<td width="45" class="tRight">標(biāo)題：</td> 
<td> 
<input type="text" id="title" name="title"> 
<input type="button" value="檢查" onClick="checktitle();"> 
</td> 
<td> 
<span id="checkbox"></span> 
</td> 
</tr> 
</tbody> 
</table> 
</form> 

代碼解釋：
為“檢查”按鈕添加一個(gè)onclick事件，當(dāng)按鈕被點(diǎn)擊時(shí)，調(diào)用checktitle()函數(shù)
在checktitle函數(shù)中，我們只用到了ThinkAjax對(duì)象中的成員方法send
　　　　send:function(url,pars,response,target,tips,effect){……}
可以看出ThinkAjax.send方法共有6個(gè)參數(shù)：
參數(shù)url：表示要將客戶端瀏覽器傳輸過(guò)來(lái)的數(shù)據(jù)提交到服務(wù)器上的哪個(gè)方法進(jìn)行處理，我這里提交給“當(dāng)前模塊下的checktitle方法”處理
參數(shù)pars：相當(dāng)于ajax中的send方法中的參數(shù)string，表示要提交過(guò)去的數(shù)據(jù)，該參數(shù)只用于post方式傳值
參數(shù)response：自定義的回調(diào)函數(shù)，如果定義了回調(diào)函數(shù)，則服務(wù)器處理完提交過(guò)去的數(shù)據(jù)之后，將會(huì)把處理后的數(shù)據(jù)交給回調(diào)函數(shù)進(jìn)行處理。該回調(diào)函數(shù)有兩個(gè)參數(shù)：①data②status 參數(shù)data：將服務(wù)器端處理后的數(shù)據(jù)賦給data 參數(shù)status：表示處理后的狀態(tài)信息，1表示成功 0 表示失敗
參數(shù)target：表示將處理后的數(shù)據(jù)在哪個(gè)地方進(jìn)行顯示（或輸出），比如：我將此參數(shù)賦為：checkbox，表示處理后的數(shù)據(jù)會(huì)在id=”checkbox”的標(biāo)簽進(jìn)行信息輸出
當(dāng)前模塊下的checktitle方法的源代碼：

復(fù)制代碼代碼如下:

 
<?php 
class IndexAction extends Action 
{ 
// 首頁(yè) 
public function index(){ 
$this->display(); 
} 
// 檢查標(biāo)題是否可用 
public function checkTitle() 
{ 
if(!empty($_POST['title'])) 
{ 
$Form = D("Form"); 
if($Form->getByTitle($_POST['title'])) 
{ 
$this->error('標(biāo)題已經(jīng)存在'); 
} 
else 
{ 
$this->success('標(biāo)題可以使用!'); 
} 
} 
else 
{ 
$this->error('標(biāo)題不能為空...'); 
} 
} 
} 
?> 