ThinkPHP JQuery Ajax 的實現實例

 

ThinkPHP JQuery Ajax

ThinkPHP 框架和客戶端是完全分離的，沒有任何的依賴，而服務端返回 ajaxReturn 方法也是通用的。在《ThinkPHP Ajax 使用詳解及實例》一文中，講述的是 ThinkAjax 類庫結合 prototyep 和 mootools 來實現的 Ajax 。事實上可以使用任何 Js 類庫來實現 ThinkPHP Ajax ，本文就以 JQuery 來實現《ThinkPHP Ajax 使用詳解及實例》一文中同樣的功能。

Js 類庫

要使用 ThinkPHP JQuery Ajax，需要加載的 Js 類庫有：

<load href="/Public/Js/Jquery/jquery.js" />
<load href="/Public/Js/Jquery/jquery.form.js" />

說明：jquery.form.js 類庫是一個 JQuery 的插件，在這里用於簡化表單的 ajax 交互，可根據實際情況決定是否加載。

這些 Js 類庫可以在ThinkPHP 2.1 版本官方示例的 Public/Js/Jquery 下獲得，在本節實例代碼下載包也提供，請確認在進行 Ajax 測試之前，正確加載了以上 Js 類庫。

AJAX 返回

使用 ajaxReturn 與 success/error 這兩種方法返回。

關於 ajaxReturn 方法返回具體細節請參閱《ThinkPHP Ajax 使用詳解及實例》一文，success/error 返回請參閱《ThinkPHP success/error 方法返回 Ajax 信息》一文。

ThinkPHP JQuery Ajax 實例

例子功能與《ThinkPHP Ajax 使用詳解及實例》一樣，點擊（實際使用中也可以使用其他事件來替代） “檢測用戶名” 按鈕檢測用戶名是否符合要求，點擊 “提交” 按鈕根據輸入的用戶名返回不同的信息。

html 文件

Public/loginJauery.html 模板，Js 處理函數及 form 表單：

<script language="JavaScript">
<!--
function checkName(){
    $.post('-Article/checkName',{'username':$('#username').val()},function(data){
        $('#result').html(data.info).show();
        $("#result").fadeOut(4000);
    },'json');
}

$(function(){
    $('#form1').ajaxForm({
        beforeSubmit:  checkForm,  // 表單提交執行前檢測
        success:       complete,  // 表單提交后執行函數
        dataType: 'json'
    });
    function checkForm(){
        if( '' == $.trim($('#username').val())){
            $('#result').html('用戶名不能為空！').show();
            $("#result").fadeOut(4000);
            $('#username').focus();
            return false;
        }
        // 可以在此添加其它判斷
    }
    function complete(data){
        if(data.status==1){
            $('#result').html(data.info).show();
            // 更新列表
            username = data.data;
            $('#list').html('<span style="color:blue">'+username+'你好!</span>');
        }else{
            $('#result').html(data.info).show();
            // 隱藏上次遺留的信息
            $('#list').hide();
        }
    }
});
//-->
</script>
<div id="result"></div>
<div id="list"></div>
<form name="login" id="form1" method="post" action="-Article/checkLogin">
用戶名: <input type="text" name="username" id="username" />
<input type="button" value="檢查用戶名" onClick="checkName()"><br />
密 碼: <input type="password" name="password" /><br />
<input type="hidden" name="ajax" value="1">
<input type="submit" value="提 交">
</form>

說明

1. 點擊“檢查用戶名”按鈕觸發 checkName() 函數，該函數是 JQuery 一個簡單的 POST 請求功能以取代復雜 $.ajax。
2. $('#form1').ajaxForm 用於替代原本的按鈕 click 事件 + $.ajax() 實現，這是 jquery.form.js 插件對 form 提交的簡化。
3. 與《ThinkPHP Ajax 使用詳解及實例》相比，本文增加了 checkForm() 判斷。
4. 返回的數據 data 中，data.data 表示返回的數據，data.info 表示提示信息，data.status 表示狀態，分別與 ajaxReturn 前三個參數對應。
5. 由於加載了 jquery.form.js 插件，表單須按一般格式提供 action 值及提交按鈕 type="submit" 。
6. 要利用 JQuery 操作更多 html（如追加 html 元素為 append()），請參考 JQuery 手冊。

服務端操作

輸出 loginJquery.html 模板：

public function loginJquery(){
    $this->display();
}

checkName 及 checkLogin 操作與《ThinkPHP Ajax 使用詳解及實例》一文完全一致，為便於查看下面再行列出：

public function checkName(){
    if ($_POST['username'] == 'admin'){
        $this->success('用戶名正確~');
    }else{
        $this->error('用戶名錯誤！');
    }
}
public function checkLogin(){
    if ($_POST['username'] == 'admin'){
        $this->ajaxReturn($_POST['username'],'用戶名正確~',1);
    }else{
        $this->ajaxReturn('','用戶名錯誤！',0);
    }
}

當表單中輸入的用戶名是 admin 的時候，返回正確信息，否則返回用戶名錯誤的提示。更進一步的，可以將上述 checkLogin 方法進行擴展成為用戶登陸檢測功能模塊。

以上是 ThinkPHP JQuery Ajax 的實現過程及關鍵代碼部分，如果您對 ThinkPHP Ajax 還不是很熟悉，還請同時參考本節前面兩篇文章《ThinkPHP Ajax 使用詳解及實例》與《ThinkPHP success/error 方法返回 Ajax 信息》。

要查看該實例完整代碼，請參閱《ThinkPHP Ajax 實例代碼》，或者點擊此處下載完整代碼。