ThinkPHP对Ajax完全支持

 

ThinkPHP对Ajax完全支持

ThinkPHP完全支持Ajax，并且还内置了一个SmartAjax和ThinkAjax类库，你可以不通过任何其他Ajax类库包就可以在ThinkPHP中使用Ajax支持。
首先说一下ThinkPHP的JS类库以及如何在ThinkPHP中引入Js类库

JS类库
ThinkPHP框架自带了一个易于扩展的JS类库，并且通过标签库技术和JS方法轻松导入。
JS类库的引入给ThinkPHP的发展和企业级应用开启了新的一面，同时也给基于ThinkPHP的应用开发定义了一个相对简单的JS导入规范。这个规范类似于ThinkPHP基类库的命名空间导入方式，并且该规范同样可以适用于CSS文件的导入。下面先看个例子：
基于标签库技术的JS类库引入方法

• <html:import type='js' file='Js.Base' /> html:import file='Js.Util.Calendar' />
• <

使用html:import标签 可以引入所需要的JS文件，如果没有指定type，则默认为js，import的根目录可以设定，也可以通过basepath参数指定。以上的标签就表示导入 Js/Base.js、 Js/Util/Calendar.js、 ../public/Js/common.js。
这种方式的Js导入是显式的，除了以上标签库形式的导入，ThinkPHP还支持隐式的JS方法导入JS文件。
在Base.js文件中定义了_import方法，可以起到和html:import标签类似的功能，例如：

• <SCRIPT LANGUAGE='JavaScript'> ImportBasePath = 'http://localhost/public/'; _import('Js.Form.CheckForm'); //--> </SCRIPT>
• <!--

要使用_import方法在Js文件中隐式导入所需的JS类库，前提是必须加载Base.js文件和设定ImportBasePath 参数（即导入根目录），并且该方法只能导入JS文件。
除此之外，ThinkPHP提供的JS类库还提供了基于文件名方式导入JS和CSS的方法：ImportJS和ImportCss。
ThinkPHP框架目前的JS类库还比较有限，但是开发人员可以很方便的扩充自己的JS类库，并且随着ThinkPHP的不断完善，也一定会提供更加丰富的JS类库。
目前提供的类库有：

• Base.js JS基础文件
• String目录 字符串操作扩充类
• Util目录 工具类库
• Form目录 表单操作类库

SmartAjax和ThinkAjax
SmartAjax 是一个Ajax类库，纯JS解决方案，参考了CoreAjax的某些功能实现，支持HTML元素和事件绑定Ajax操作、表单提交，并可以定时执行，支持更新效果。 ThinkAjax和ThinkPHP结合，在返回数据格式上面专门针对ThinkPHP作了处理，其他用法和SmartAjax类似。

主要属性：
updateTip //更新提示信息，支持HTML method //提交方法POST 或者GET effect //更新效果，采用mootools类库，例如 {”font-size”:[0,25],”opacity”: [1,0.3]} 主要方法：
// 发送Ajax请求
send(提交URL,提交参数,结果显示DIV对象或者ID,更新显示效果,定时执行时间间隔)

// 发送表单Ajax操作
sendForm(表单对象或者ID,提交URL,结果显示DIV对象或者ID,更新显示效果)

// 绑定Ajax操作到HTML元素和事件
bind(源HTML元素或者ID,绑定事件,提交URL,提交参数,结果显示DIV对象或者ID,更新效果)

// 页面加载时候进行Ajax操作
load(提交URL,提交参数,结果显示DIV对象或者ID,更新效果)

// 定时执行Ajax操作
repeat(提交URL,提交参数,结果显示DIV对象或者ID,执行间隔,更新效果)

使用举例：

• // 加载需要的类库
• <script language='JavaScript'  src='/Js/prototype.js'></script> <script language='JavaScript' src='/Js/mootools.js'></script>
  
• <script language='JavaScript' src='/Js/SmartAjax.js'></script> SmartAjax.updateTip = "更新中～";
• SmartAjax.effect = {'font-size':[0,30],'opacity': [1,0.3]};
• // 页面加载时执行通过Ajax操作在后台执行load.php
• SmartAjax.load('http://localhost/load.php',"name=thinkphp","result");
• // 绑定click操作到id为run的html元素，执行Ajax
• SmartAjax.bind('run','click','http://localhost/hello.php',"name=thinkphp","result");
• // 每隔1秒种执行time.php，输出
• SmartAjax.repeat('http://localhost/time.php',"",$('timer'),1000);
• // Ajax方式提交表单数据
• SmartAjax.sendForm('login', APP+'/User/checkLogin/','result',doLogin);

Ajax文件上传
ThinkPHP框架内置了对Ajax文件上传(非真正Ajax）的实现。采用的是iframe的方式对文件上传进行支持。结合ThinkPHP的文件上传类，可以很方便地进行文件上传和批量上传。下面是一个典型的文件上传示例代码：

• <form id="upload" METHOD=POST action="__APP__/Attach/insert/" enctype="multipart/form-data" target="iframeUpload"> INPUT TYPE="hidden" name="_AJAX_SUBMIT_" value="1"> iframe name="iframeUpload" src="" width="350" height="35" frameborder=0 SCROLLING="no" style="display:none"></iframe> INPUT TYPE="hidden" name="_uploadFileResult" value="result"> INPUT TYPE="hidden" name="_uploadFileType" value="jpg,gif,png" > INPUT TYPE="hidden" name="_uploadSaveRule" value="{$user.id}"> INPUT TYPE="hidden" name="_uploadFormId" value="upload"> INPUT TYPE="hidden" name="_uploadFileSize" value="20480" > INPUT TYPE="hidden" name="_uploadResponse" value="uploadComplete"> INPUT TYPE="file" name="file"> INPUT TYPE="submit" value="上传" > form>
• <
• <
• <
• <
• <
• <
• <
• <
• <
• <
• </

上传完成后，ThinkPHP系统会在iframe里面返回js代码和数据，并根据自定义的方法更新页面的result标签。更多关于文件上传方面的掌握请看 文件上传类的使用教程

后端Ajax数据返回
SmartAjax是一个独立的前端JS类库，其运行并不需要后台支持。不过，在后台处理和数据返回方面，结合ThinkPHP框架提供的一些完善处理，能够使得后台的开发效率提高。首先，在页面使用Ajax方式提交的时候使用_AJAX_SUBMIT_隐藏变量或者ajax变量，后台能够自动识别该操作为Ajax操作，并作出相应的处理。例如，表单提交Ajax方式，在form中添加 <INPUT TYPE="hidden" name="_AJAX_SUBMIT_" value="1">
如果使用SmartAjax.send方法提交操作，直接在参数里面添加ajax变量

• SmartAjax.send('url','ajax=1&name=thinkphp','result);

在后台Action类处理完毕后，简单使用：
ajaxReturn($data,$info,$status) 来返回数据到客户端，其中
$data 表示需要返回客户端的数据，可以是字符串、数组或者对象（经过JSON_ENCODE编码，可以被js直接使用）
$info 表示提示信息（例如操作成功、失败等）
$status 表示操作状态码（1表示成功 0 表示失败 可以由应用自己定义，客户端作相应处理就可以了）
通常的方式我们需要使用echo或者exit来输出数据，并且还需要设置utf8编码，最麻烦的是还要自己进行json编码，使用AjaxReturn方法，一切都内置处理了。并且，另外一个方便之处是，不仅仅可以返回数据，还可以返回操作状态（例如操作失败还是成功）以及相关提示信息。 ThinkPHP对于JSON的处理已经作了兼容处理，无论是PHP4还是PHP5都可以直接使用JSON_ENCODE方法来对PHP对象、数组或者字符串等类型直接编码成JSON数据返回给客户端由JS处理。

为了更好的获取ThinkPHP后台Action的ajaxReturn方法返回的信息，框架JS类库中增加了一个ThinkAjax类库为后台ajax信息返回提供完全支持。 ThinkAjax类的使用和SmartAjax基本类似，只是简化了操作，只需要在客户端定义接受数据的处理方法，其他的由ThinkAjax类库自动处理了，包括信息提示。一个ThinkAjax的使用例子：

• ThinkAjax.sendForm('formId','__URL__/action/',complete); complete(data,status,info){ // 获取返回数据，并进行处理 }