ThinkPHP Ajax 使用详解及实例

ThinkPHP Ajax

ThinkPHP 内置了对 Ajax 的支持，可以方便的使用。下面以一个具体的例子来介绍 ThinkPHP Ajax 的使用。

提示

本文涉及的内容，适用于 ThinkAjax+mootools 来实现 Ajax ，使用 JQuery 来实现 ThinkPHP Ajax 请参见《ThinkPHP JQuery Ajax》。

Js 类库

要使用 ThinkPHP Ajax，需要加载的 Js 类库有：

<load href="__PUBLIC__/Js/Base.js" />
<load href="__PUBLIC__/Js/prototype.js" />
<load href="__PUBLIC__/Js/mootools.js" />
<load href="__PUBLIC__/Js/Ajax/ThinkAjax.js" />

ajaxReturn 返回

ThinkPHP 提供了 ajaxReturn 方法用于 Ajax 调用后返回数据给客户端，语法如下：

$this->ajaxReturn(mixed data, string info, boolean status, string type);

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','__URL__/checkLogin',complete,'result');" val
ue="提 交" />
</form>

ThinkAjax.sendForm() 函数参数说明：

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 。

本文属原创，转载请注明原文：https://www.zhimatong.com/jiaocheng/602.html

为保证教程的实用性及扩大知识面覆盖，如果您有相似问题而未解决，可联系在线客服免费技术支持。