使用Yii框架自帶的CActiveForm實現ajax提交表單

注意： 啓用enableAjaxValidation => true 貌似自定義url 不起作用！

 

Php代碼: 

1. <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代碼:  

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

如果你使用這個按鈕，那麼你就無法使用表單自帶的rule規則驗證，即使實現了，也相當麻煩，乾脆別用這個，這個按鈕適應不需要驗證的表單

 

原文網址：http://blog.csdn.net/wjc19911118/article/details/42237379