利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法

  准备工作:

  ① 首先要会使用ThinkPHP这个框架

  ② 最好有些ajax的基础(可以去看下小飞的另外一篇博文:Ajax实时验证"用户名/邮箱等"是否已经存在

  ③ 4个js文档(点此免积分下载

  先贴上源代码:

  

复制代码 代码如下:

  <script type="text/javascript" src="__PUBLIC__/js/base.js"></script>

  <script type="text/javascript" src="__PUBLIC__/js/prototype.js"></script>

  <script type="text/javascript" src="__PUBLIC__/js/mootools.js"></script>

  <script type="text/javascript" src="__PUBLIC__/js/Ajax/ThinkAjax.js"></script>

  <script type="text/javascript">

  function checktitle()

  {

  ThinkAjax.send('__URL__/checktitle','ajax=1&title='+$('title').value,'','checkbox');

  }

  </script>

  <form action="__URL__/insert" method="post" id="myform">

  <table>

  <tbody>

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

  </td>

  </tr>

  </tbody>

  </table>

  </form>

  代码解释:

  为“检查”按钮添加一个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:表示将处理后的数据在哪个地方进行显示(或输出),比如:我将此参数赋为:checkbox,表示处理后的数据会在id=”checkbox”的标签进行信息输出

  当前模块下的checktitle方法的源代码:

  

复制代码 代码如下:

  <?php

  class IndexAction extends Action

  {

  // 首页

  public function index(){

  $this->display();

  }

  // 检查标题是否可用

  public function checkTitle()

  {

  if(!empty($_POST['title']))

  {

  $Form = D("Form");

  if($Form->getByTitle($_POST['title']))

  {

  $this->error('标题已经存在');

  }

  else

  {

  $this->success('标题可以使用!');

  }

  }

  else

  {

  $this->error('标题不能为空...');

  }

  }

  }

  ?>

  文章作者:WEB开发_小飞