如何在单击刷新按钮时重新加载 Zend Captcha 图像？

Question

我在我的 php 页面中应用了一个 zend 验证码，现在我需要添加验证码重新加载按钮。请根据zend给出答案。

Answer 1

1. 在config/autoload/global.php 中添加以下内容

   'view_manager' => array(
       'strategies' => array(
           'ViewJsonStrategy','Zend\View\Strategy\PhpRendererStrategy'
       ),
   ),
   

2. 在YourModule/src/YourModule新建文件夹Ajax

3. 在Yourmodule/Ajax里面创建一个文件AjaxController.php

   namespace YourModule\Ajax;
   
   use Zend\Mvc\Controller\AbstractActionController;
   use Zend\View\Model\JsonModel;
   use YourModule\Forms\SignupForm;
   
   class AjaxController extends AbstractActionController
   {          
       public function refreshSignupCaptchaAction(){
           $form = new SignupForm();
           $captcha = $form->get('captcha')->getCaptcha();             
           $data = array();                
           $data['id']  = $captcha->generate();
           $data['src'] = $captcha->getImgUrl().$captcha->getId().$captcha->getSuffix();
           return new JsonModel($data);
       }
   }
   

4. 在module.config.php内添加路由

   'yourmodule-ajax' =>array(
           'type' => 'segment',
           'options' => array(
           'route' => '/yourmodule/ajax/:action',
               'constraints' => array(    
                   'action' => '\w+',
               ),
               'defaults' => array(
                   'controller' => 'YourModule\Ajax\AjaxController',
               )                  
           ),
       ),
   

5. 最后在你的模板中，我假设你使用的是 jquery

   <div class="form-group">
       <div id="captcha" class="control-group <?php echo count($form->get('captcha')->getMessages()) > 0 ? 'has-error' : '' ?>">
           <?php echo $this->formLabel($form->get('captcha')); ?>
           <div class="col-xs-12 col-sm-6">
               <a id="refreshcaptcha" class="btn btn-default pull-right">Refresh</a>
               <?php echo $this->formElement($form->get('captcha')); ?>
               <?php echo $this->formElementErrors($form->get('captcha')); ?>
           </div>
       </div>
   </div>
   
   <script type="text/javascript">
   $(function(){
   
       $('#refreshcaptcha').click(function() { 
           $.ajax({ 
               url: '<?php echo $this->url('yourmodule-ajax', array('action'=>'refreshSignupCaptcha')) ?>', 
               dataType:'json', 
               success: function(data) { 
                   $('#captcha img').attr('src', data.src); 
                   $('#captcha input[type="hidden"]').attr('value', data.id); 
                   $('#captcha input[type="text"]').focus(); 
               }
           }); 
           return false;
       });
   });
   </script>
   

Answer 2

@Benjamin Cremer 感谢您的代码，就像魅力一样:) 读完这篇文章后 我用jquery做到了。

$(document).ready(function() {
    $('#refreshcaptcha').click(function() {
        $.ajax({
            url: '/contact/refresh',
            dataType:'json',
            success: function(data) {
                $('#contactForm img').attr('src',data.src);
                $('#captcha-id').attr('value',data.id);
            }
        });
    });
});

Answer 3

@user236501 实际上它可以是任何类型的 Zend 表单元素（例如按钮）。您甚至可以将可点击的刷新链接作为 Zend_Form_Element_Captcha 描述选项，如下所示：

        $captcha = new Zend_Form_Element_Captcha('captcha', array(
            'label' => 'Some text...',
            'captcha' => array(
                'captcha' => 'Image',
                'wordLen' => 6,
                'timeout' => 300,
                'font' => './fonts/Arial.ttf',
                'imgDir' => './captcha/',
                'imgUrl' => 'http://some_host/captcha/'
            ),
            'description' => '<div id="refreshcaptcha">Refresh Captcha Image</div>'
        ));

但是在那种情况下Description装饰器的选项应该被修改，例如：

        $this->getElement('captcha')->getDecorator('Description')->setOptions(array(
            'escape'        => false,
            'style'         => 'cursor: pointer; color: #ED1C24',
            'tag'           => 'div'
        ));

可以在表单的init() 方法中完成。 对不起我的英语不好。顺便说一句，我不确定我是否把我的评论放在了正确的地方；）

Answer 4

只需两个快速的 sn-ps，但我想你会明白的。根据需要调整元素名称和选择器。

在你的控制器中添加一个方法来生成一个新的验证码

public function refreshAction()
{
    $form = new Form_Contact();
    $captcha = $form->getElement('captcha')->getCaptcha();

    $data = array();

    $data['id']  = $captcha->generate();
    $data['src'] = $captcha->getImgUrl() .
                   $captcha->getId() .
                   $captcha->getSuffix();

   $this->_helper->json($data);
}

在您的视图脚本中（我正在使用 mootools 来处理 ajax 请求）

document.addEvent('domready', function() {
     $$('#contactForm img').addEvent('click', function() {
        var jsonRequest = new Request.JSON({
            url: "<?= $this->url(array('controller' => 'contact', 'action' => 'refresh'), 'default', false) ?>",
            onSuccess: function(captcha) {
                $('captcha-id').set('value', captcha.id);
                $$('#contactForm img').set('src', captcha.src);
            }
        }).get();
    });
});

编辑：添加了 pahan 的 jquery

$(document).ready(function() {
    $('#refreshcaptcha').click(function() { 
        $.ajax({ 
            url: '/contact/refresh', 
            dataType:'json', 
            success: function(data) { 
                $('#contactForm img').attr('src', data.src); 
                $('#captcha-id').attr('value', data.id); 
            }
        }); 
    }); 
});