如何使用Yii框架自带的CActiveForm实现ajax提交表单

jerry Yii 2015年08月09日 收藏
<div class="form">  
<?php $form=$this->beginWidget('CActiveForm', array(  
    'id'=>'login-form',  
    'enableAjaxValidation'=>true,  
    'enableClientValidation'=>true,  
     'clientOptions' => array(  
                        'validateOnSubmit' => true,  
                        'afterValidate'=>'js:function(form,data,hasError){  
                        if(!hasError){  
                                $.ajax({  
                                        "type":"POST",  
                                        "url":"login",  
                                        "data":$("#login-form").serialize(),  
                                        "success":function(data){$("#searchResults").html(data);},  
                                          
                                        });  
                                }  
                        }'  
                    ),  
      
)); ?>  
  
    <p class="note">Fields with <span class="required">*</span> are required.</p>  
  
    <div class="row">  
        <?php echo $form->labelEx($model,'username'); ?>  
        <?php echo $form->textField($model,'username'); ?>  
        <?php echo $form->error($model,'username'); ?>  
    </div>  
  
    <div class="row">  
        <?php echo $form->labelEx($model,'password'); ?>  
        <?php echo $form->passwordField($model,'password'); ?>  
        <?php echo $form->error($model,'password'); ?>  
        <p class="hint">  
            Hint: You may login with <tt>demo/demo</tt>.  
        </p>  
    </div>  
  
    <div class="row rememberMe">  
        <?php echo $form->checkBox($model,'rememberMe'); ?>  
        <?php echo $form->label($model,'rememberMe'); ?>  
        <?php echo $form->error($model,'rememberMe'); ?>  
    </div>  
  
    <div class="row submit">  
        <?php echo CHtml::SubmitButton('Login');?>  
    </div>  
    <div id="searchResults"></div>  
  
<?php $this->endWidget(); ?>  
</div><!-- form -->

看这段代码是yii框架自动生成form表单中的代码,enableAjaxValidation 是否开启ajax验证,enableClientValidation是否开启客户端验证,clientOptions是客户端验证选项,开启客户端验证就是像用户名格式、密码格式之类的前端js正则验证就可以了,但是像用户名需要进行唯一性验证的时候,单纯的客户端验证不能实现了,这时候就需要ajax异步验证相配合,所以两个都需要开启,clientOptions中定义了客户端验证是在什么时候进行,我设定的是提交前(submit之前),afterValidate中定义了验证通过之后需要进行的js操作,就是提交表单数据到后台,没什么难点,只是可能有些方法不知道,问百度。

Yii中还有一个ajax提交的button,

<?php echo CHTML::ajaxSubmitButton($label, $url)?>