如何通过Ajax重新加载表单上的验证码？

I am submitting forms using Ajax. I am using captcha on my form and first time it is working perfect when I submit form without any validation error. Sometimes servers returns some validation errors and does not submit form. At this point I need to refresh the captcha image without reloading whole page.

我正在使用Ajax提交表单。我在我的表单上使用验证码，当我提交表单时没有任何验证错误，它第一次工作正常。有时，服务器会返回一些验证错误，但不会提交表单。此时我需要刷新验证码图像而不重新加载整个页面。

Captcha Code in Zend Form:

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 for form submission:

表单提交的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;
});

How to reload captcha on form submit ?

如何在表单提交上重新加载验证码？

Thanks

谢谢

1 个解决方案

#1

I don't have an example at the moment, but I looked at how the captcha is generated in the form, and I think what you may have to do is return a new html code for the captcha form element in your json response if the form failed validation.

我目前没有示例，但我查看了如何在表单中生成验证码，我认为您可能需要做的是在json响应中为captcha表单元素返回一个新的html代码，如果表单验证失败。

The captcha element uses a reference to an image that gets created and stored in the images folder and the form html uses an id associated with that image.

captcha元素使用对创建并存储在images文件夹中的图像的引用，并且表单html使用与该图像相关联的id。

If you make a call to $yourForm->getElement('captcha')->render(); and add that to the json response, you can update your page with the new captcha element. The only issue is that calling render with the default decorators may return the <dt> and <dd> tags as well and you will somehow have to replace that with javascript in the html. If you are using custom decorators then it may be different for you, or you could render only the image and hidden fields and not the label and insert that into a div tag.

如果你调用$ yourForm-> getElement（'captcha'） - > render（）;并将其添加到json响应中，您可以使用新的captcha元素更新页面。唯一的问题是使用默认装饰器调用render也可以返回

和

标签，你将以某种方式用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);

Then in your jquery success callback, check to see if the form failed validation and update the captcha html.

然后在你的jquery成功回调中，检查表单是否验证失败并更新验证码html。

Hope that helps.

希望有所帮助。

#1