利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
准备工作:
① 首先要会使用ThinkPHP这个框架
② 最好有些ajax的基础(可以去看下小飞的另外一篇博文:Ajax实时验证"用户名/邮箱等"是否已经存在)
③ 4个js文档(点此免积分下载) 先贴上源代码:
<div class="codetitle"><a style="CURSOR: pointer" data="7709" class="copybut" id="copybut7709" onclick="doCopy('code7709')"> 代码如下:
<div class="codebody" id="code7709">
<script type="text/javascript" src="
PUBLIC/js/base.js">
<script type="text/javascript" src="
PUBLIC/js/prototype.js">
<script type="text/javascript" src="
PUBLIC/js/mootools.js">
<script type="text/javascript" src="
PUBLIC/js/Ajax/ThinkAjax.js">
<script type="text/javascript">
function checktitle()
{
ThinkAjax.send('
URL/checktitle','ajax=1&title='+$('title').value,'','check
Box');
}
<form action="
URL/insert" method="post" id="myform">
<table>
<tr>
<td width="45" class="tRight">标题:</td>
<td>
<input type="text" id="title" name="title">
<input type="button" value="检查" onClick="checktitle();">
</td>
<td>
<span id="checkBox">
</td>
</tr>
</table>
代码解释:
为“检查”按钮
添加一个onclick事件,当按钮被点击时,
调用checktitle()
函数 在checktitle
函数中,我们只用到了ThinkAjax对象中的成员
方法send
send:function(url,pars,response,target,tips,effect){……}
可以看出ThinkAjax.send
方法共有6个参数:
参数url:表示要将客户端浏览器传输过来的数据提交到服务器上的哪个
方法进行处理,我这里提交给“当前模块下的checktitle
方法”处理
参数pars:相当于ajax中的send
方法中的参数string,表示要提交过去的数据,该参数只用于post方式传值
参数response:
自定义的回调
函数,如果定义了回调
函数,则服务器处理完提交过去的数据之后,将会把处理后的数据交给回调
函数进行处理。该回调
函数有两个参数:①data②status 参数data:将服务器端处理后的数据赋给data 参数status:表示处理后的状态信息,1表示成功 0 表示失败
参数target:表示将处理后的数据在哪个地方进行
显示(或
输出),比如:我将此参数赋为:check
Box,表示处理后的数据会在id=”check
Box”的
标签进行信息
输出 当前模块下的checktitle
方法的源
代码:
<div class="codetitle">
<a style="CURSOR: pointer" data="99423" class="copybut" id="copybut99423" onclick="doCopy('code99423')"> 代码如下: