Question

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

Answer 1

只是两个快速的片段，但我想你会明白这个想法。根据需要调整元素名称和选择器。

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

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);
}

在你的视图脚本中（我正在为ajax请求使用mootools）

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); 
            }
        }); 
    }); 
});

Answer 2

@ user236501实际上它可以是任何类型的Zend表单元素（例如Button）。您甚至可以将可点击的刷新链接作为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 3

@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 4

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

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

在YourModule/src/YourModule中创建一个新文件夹Ajax

在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);
    }
}

在module.config.php

中添加路线

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

最后在你的模板中，我假设你正在使用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>

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

4 个答案: