Обновление капчи с помощью проблемы jQuery - PullRequest
Новая
       36

Обновление капчи с помощью проблемы jQuery

0 голосов
/ 11 июня 2011

Я попытался исследовать Google и пролистал некоторые вопросы здесь.Я попробовал некоторые решения, но не могу заставить их работать. 

<td>
    <img id="captcha" src="captcha.php" name="captcha" />
    <img src="refresh.jpg" width="25" alt="" id="refresh_captcha" name="refresh_captcha" />
    <input type="text" name="txtCaptcha" id="txtCaptcha" size="10" />
</td>

Код ниже не работает: 

$('.refresh_captcha').click(function(){
    $('img').attr('src', 'captcha.php?cache=' + new Date().getTime());
});

Я также пробовал это:

$("#refresh_captcha").click(function() {
    $("#captcha").attr("src","captcha.php?r=" + Math.random());
});

И это тоже: 

jQuery(function($) {
    jQuery('#captcha').after("<a href=\"#\" id=\"refresh_captcha\">Refresh<\/a>");
    jQuery('body').delegate('#refresh_captcha','click',function(){
        jQuery.ajax({
            'success':function(html){
                jQuery("#captcha").attr("src",html)
            },
            'url':'/captcha.php?refresh=1',
            'cache':false
        });
        return false;
    });
});

Кто-нибудь может мне помочь?

Ответы [ 2 ]

0 голосов
/ 24 декабря 2018 
        function fcapCha() {
            var timestamp = (new Date()).getTime();
            var newSrc = $(".capChaCaptchaImgID").attr("src").split("?");
            newSrc = newSrc[0] + "?" + timestamp;
            $(".capChaCaptchaImgID").attr("src", newSrc);
            $(".capChaCaptchaImgID").slideDown("fast");
        }
        function resetCapcha() {
            fcapCha();
            $('.acapChapinputCaptcha').val('');
        }

С наилучшими пожеланиями!

0 голосов
/ 06 сентября 2011

Вы тоже пытались очистить кеш? (РЕДАКТИРОВАТЬ: да, вы сделали ...) Проблема появилась во всех браузерах? Я считаю, что ваш браузер кэширует старое изображение, потому что ваш прямой вызов, кажется, работает. Попробуйте cache: false вместо 'cache' = false

Для меня это решение с использованием ajax-вызовов и Java Spring в бэкэнде сработало: 

function generateCaptcha() {

    $.ajaxSetup({
      cache: false
    });

    var timestamp = (new Date()).getTime();

    requestMappingCaptcha = "/generateCaptcha";

    jQuery.get(requestMappingCaptcha, timestamp, function(data) {
                $("#captchaImg").slideUp("fast");

                if (!$.browser.msie || ($.browser.msie && $.browser.version == "9.0")) { 
                        // animate reloadArrows
                        $("#reloadArrows").rotate({
                        angle:0, 
                        animateTo:360
                    });  
                }

                // setting new source
                var newSrc = $("#captchaImg").attr("src").split("?");
                newSrc = newSrc[0] + "?" + timestamp;
                $("#captchaImg").attr("src", newSrc);
                $("#captchaImg").slideDown("fast");
        });
}

И HTML для этого: 

                        <div class="container captcha">
                            <spring:url value="/captcha.jpeg" var="url"/>
                            <div class="step2_captcha">
                                <img id="captchaImg" src="${url}" alt="Generatin captcha..." width="180" height="42" border="0" name="captchaImg"/>
                            </div>
                            <span class="help captcha">
                                <img src="/r.png" onclick="generateCaptcha();" id="reloadArrows" title="Reload Captcha"/>
                            </span>
                            &nbsp;
                        </div>

Что это делает !? При нажатии на значок будет вызвана функция generateCaptcha. Сопоставление запросов вызвало функцию сервера (в моем случае java) и отображает новую капчу по тому же URL-адресу, что и старый. Важно отключить кэширование и отправить отметку времени с get. После этого немного волшебства jQuery сделано, источник капчи будет изменен на образ-Url + метка времени.

Надеюсь, это сработает и для вас, php.

...