ThinkPHP之Ajax提交

一：引子  学习ThinkPHP框架已经有一个星期了，虽然会动手做一些小demo，但总觉得只是了解其中的一些皮毛，停留在那种能做出来但不能解锁其中的原由阶段。还老是出现今天学过的过了几天就会忘，好好想想还是因为自己没怎么总结，总觉得总结这事其实是在浪费时间，每次想到要写总结的时候就会给一个借口“有这总结的时间我又可以学一些其他的知识了”。就因为这样已经半年多没写博客了，今天为何又坐在电脑前来写呢？因为每次在遇到以前的问题时候想要去找答案的时候，总是只能在别人的博客上去寻找答案，而自己以前明明解决了的怎么就是想不起来。这个时候才了解到那句好记星不如烂笔头的告言来。同时也能隐约的感觉到自己的成长。废话不多说，直接进入正题...

二：准备 硬件是电脑的躯体，软件是其灵魂。在好的软件没有硬件的支持是不能跑起来的。ThinkPHP中ajax提交信息也一样，也得有载体，不然是无法完成任务的。在这里将用我们需要用到的js类库jquery.form.js、jquery.min.js。在html文件中加载类库

<load href="__PUBLIC__/JS/jquery.form.js"/>
<load href="__PUBLIC__/JS/jquery.min.js"/>

三 提交：到底Ajax是怎么提交表单信息的呢？这里就需要用到两个函数了。首先得用到下载好的Jquery 插件里面的AjaxForm（）方法，但是该方法只是并不能提交表单，他只是为提交表单做准备工作。但执行提交的时候还得靠AjaxSubmit()方法去执行。

$(function(){
     $('#form1').ajaxForm({
         beforeSubmit:  checkForm, //  在点击之前（表单已经填好）执行
           //当提交好表单以后调用ajaxSubmit来提交准备好的表单。在action 里面有ajaxReturn()返回。
         success:  complete,  // post-submit callback
         dataType: 'json'
     });
}

从这代码我们可以知道，当取得id值为form1的表单时候，执行了两个方法首先checkForm，在这里就检验表单的标题是否为空。

function checkForm(){
    if( '' == $.trim($('#title').val())){
          $('#result').html('标题不能为空').show();
               return false;
     }
                //可以在此添加其它判断
}

另一个就是根据AjaxReturn（）方法的信息判断status是否为1来执行complete方法：

function complete(data){
     if (data.status==1){
           $('#result').html(data.info).show();
            // 更新列表
           data = data.data;
           var html =  '<div class="result" style=\'font-weight:normal;background:#A6FF4D\'>' +
          '<div style="border-bottom:1px dotted silver">标题：'+data.title+'  [ '+data.create_time+' ]</div>' +
                            '<div class="content">内容：'+data.content+'</div></div>';
            $('#list').prepend(html);
      }else{
         $('#result').html(data.info).show();
      }
 }

那么现在问题来了，在这两个方法之间是不是还进行了什么操作呢？他是怎么提交信息和返回信息的？当点击事件发生以后系统就会调用AjaxSubmit方法将表单信息提交给控制器处理，然后再调用AjaxReturn返回信息给浏览器。那么我们现在看看控制器Action类中怎么处理表单信息的。

     /**
     * 使用ajax处理表单数据，根据表单信息
     * 向数据库中插入数据。
     */
    public function insert(){
        $Form = D("Form");
        if($vo=$Form->create()){
            if(false!==$Form->add()){    //添加成功
                $vo['create_time']=date('Y-m-d H:i:s',$vo['create_time']);
                //字符串中的每个新行 (\n) 之前插入 HTML 换行符 (<br />)。
                $vo['content']=nl2br($vo['content']);
                //用ajaxReturn(数据，提示信息，操作状态)方法返回信息给客户端，
                $this->ajaxReturn($vo,'表单数据保存成功！',1);
            }else{
                $this->error('数据写入错误！');
            }
        }else{
            $this->error('输入信息有误。');
        }
    }

到这里的时候我们似乎明白了一些，但是具体html 文件是怎么触发控制器去执行insert这个处理表单的方法呢。

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

这样的话，当我们提交表单的时候，控制器类就会根据URL的不同的情况去处理表单信息然后返回客户给信息。这样一个表单的提交就完成了。

四：好处 我们知道直接就可以应用Form表单进行提交信息，那么为什么还要使用Ajax来提交呢？原来是因为当我们选择了form表单提交的时候，控制器会处理好的信息用一个空白网页返回给浏览器用户，而后者就是直接在本页中操作，进行操作以后就相当于刷新页面而已，而不要跑到一个空页面去了。当然了，它也有不足之处，就是因为它在本页中操作，那么出于安全考虑就不能进行文件上传功能。所以在选择提交方式的时候根据自己的需求决定。
写了这么多，看看效果吧。。。。。



希望大家指正，共同进步，共同学习。