如何重新加載表單通過Ajax提交驗證碼？

Question

我使用Ajax提交表單。我在我的表單上使用了captcha，當我提交表單時沒有任何驗證錯誤，我第一次使用了captcha。有時服務器返回一些驗證錯誤，並且不提交表單。此時我需要刷新驗證碼圖像，而無需重新加載整個頁面。

圖形驗證碼中的Zend形式：

$captcha= new Zend_Form_Element_Captcha('captcha', array(
       'id'=>'captcha', 
       'title'=>'Security Check.', 
       'captcha' => array(
       'captcha' => 'Image', 
       'required' => true, 
       'font'  => '../public/fonts/ARIALN.TTF', 
       'wordlen' => '6', 
       'width' => '200', 
       'height' => '50', 
       'imgdir' => '../public/images/captcha/', 
       'imgurl' => '/images/captcha/' 
       ))); 

jQuery的表單提交：

jQuery('form.AjaxForm').submit(function() { 

    $.ajax({ 
     url  : $(this).attr('action'), 
     type : $(this).attr('method'), 
     dataType: 'json', 
     data : $(this).serialize(), 
     success : function(data) { 
         // reload captcha here 
         alert('Success'); 
        }, 
     error : function(xhr, err) { 
         // reload captcha here 
         alert('Error'); 
       } 
    }); 

    return false; 
}); 

如何重新加載表單提交驗證碼？

感謝

Answer 1

我沒有在目前的例子，但我看着驗證碼是怎樣的形式產生的，我想你可能需要做的就是回到了一個新的HTML代碼是什麼如果表單未通過驗證，那麼在您的json響應中使用captcha表單元素。

captcha元素使用對創建並存儲在圖像文件夾中的圖像的引用，並且html使用與該圖像關聯的id。

如果您撥打$yourForm->getElement('captcha')->render();並將其添加到json響應中，則可以使用新的驗證碼元素更新您的頁面。唯一的問題是使用默認裝飾器調用渲染器可能會返回<dt>和<dd>標記，並且您將不知何故必須用html中的javascript代替它。如果你使用自定義裝飾器，那麼它可能會有所不同，或者你只能渲染圖像和隱藏的字段，而不是標籤，並將其插入div標籤。

// in your controller where the form was validated 
$form = new Form(); 
if (form->isValid($this->getRequest()->getPost()) == false) { 
    $captcha = $form->getElement('captcha')->render(); 
    $json['captchahtml'] = $captcha; 
} 

$this->view->json = json_encode($json); 

然後在你的jQuery success回調，請檢查表單驗證失敗並更新驗證碼的HTML。

希望有所幫助。