ThinkPHP Ajax 实例

下面的小例子，输入用户名，服务器端根据用户名来 Ajax 返回不同的信息，该例子可扩展为 Ajax 的用户登陆检测功能。

html 文件

form 表单及 Js 处理函数：

<script language="JavaScript">
    function complete(data,status){
        if (status==1){
            $('list').innerHTML = '<span style="color:blue">'+data+'你好!</span>';
        }
    }
</script>

<div id="result"></div>
<div id="list"></div>
<form name="login" id="form1" method="post"">
用户名: <input type="text" name="username" /><br />
<input type="button" onClick="ThinkAjax.sendForm('form1','-Article/checkLogin',complete,'result');" val
ue="提 交" />
</form>

1. 第一个参数为提交表单的 id 。
2. 第二是参数为提交服务器端处理的地址。
3. 第三个参数为如果提交成功，执行的函数名称。
4. 第四个参数为显示提示信息的 div id。

服务端操作

假定服务端对用户名的检测操作为 Public/checkLogin ：

public function checkLogin(){
    if ($_POST['username'] == 'admin'){
        $this->ajaxReturn($_POST['username'],'用户名正确~',1);
    }else{
        $this->ajaxReturn('','用户名错误！',0);
    }
}

当表单中输入的用户名是 admin 的时候，返回正确信息，否则返回用户名错误的提示。更进一步的，可以将上述 checkLogin 方法进行扩展成为用户登陆检测功能模块。

ThinkPHP Ajax 实现流程说明

1. 将表单提交按钮定义为 button ，点击触发 onClick 事件，执行 ThinkAjax.sendForm() 函数。
2. ThinkAjax.sendForm() 函数将表单提交（默认 POST 方式）给服务器端 checkLogin 操作执行。
3. checkLogin 操作根据检验结果使用 ajaxReturn 返回不同信息。
4. ThinkAjax.sendForm() 根据服务器端返回结果，将提示信息显示在 id="result" 的结果内并执行 complete() 函数。
5. ajaxReturn 如果返回的 status=1 ，complete() 函数执行 id="list" div 的 innerHTML 。

以上简单讲述了 ThinkPHP 的 Ajax 实现过程，上面的实例限于篇幅仅列出了关键代码，要查看该实例完整代码，请参阅《ThinkPHP Ajax 实例代码》，或者点击此处下载完整代码。