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" />

这些 Js 类库可以在官方示例的 Public/Js 下获得,在本节实例代码下载包也提供,请确认在进行 Ajax 测试之前,正确加载了以上 Js 类库。

ajaxReturn 返回

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

$this->ajaxReturn(mixed data, string info, boolean status, string type);
参数说明:
参数 说明
data 返回给客户端的数据。
info 提示信息。
status 返回状态,一般来说 1 表示执行成功,0 表示不成功。
type 指定 ajax 返回类型:JSON|XML,如果不指定,则取 DEFAULT_AJAX_RETURN 配置,该配置默认为 JSON 。

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>
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 。

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

本章节内容共分 4 部分:

  1. 1. ThinkPHP Ajax 使用详解及实例
  2. 2. ThinkPHP success/error 方法返回 Ajax 信息
  3. 3. ThinkPHP JQuery Ajax 的实现实例
  4. 4. ThinkPHP Ajax 实例源代码

评论于2016-12-18日起不再显示。

5idev.com(我爱开发网) — 提供最好的 XHTML教程DIV+CSS教程JavaScript教程PHP教程ThinkPHP教程