jCaptcha - Обновить только изображение, а не всю страницу

Я использую jCaptcha (http://jcaptcha.sourceforge.net/) на нашем сайте. Проблема в том, что иногда очень трудно прочитать изображение. Итак, мы планируем предоставить кнопку с именем «ОБНОВИТЬ» рядом с изображением jcaptcha, и при нажатии кнопки «ОБНОВИТЬ» она должна обновлять только изображение jcaptcha, а не всю страницу/портлет. Как мы можем сделать это?


captcha
person Rocky    schedule 28.04.2011    source источник

Ответы (5)


arrow_upward
2
arrow_downward

Вот как я решил это с помощью JQuery, он заменит изображение. Функция alert() предназначена только для демонстрации нового имени файла и, конечно же, может быть удалена. Код использует подключаемый модуль jquery в Grails, но показывает, что делать в jquery, чтобы обновить изображение.

<div>
<jcaptcha:jpeg name="captchaImage"/>

<a href="#" id="refreshCaptcha">Refresh captcha</a>
<jq:jquery>
   $("#refreshCaptcha").click(function() {
      $("#captchaImage").fadeOut(500, function() {
         var captchaURL = $("#captchaImage").attr("src");
         captchaURL = captchaURL.replace(captchaURL.substring(captchaURL.indexOf("=")+1, captchaURL.length), Math.floor(Math.random()*9999999999));
         alert(captchaURL);
         $("#captchaImage").attr("src", captchaURL);
      });
      $("#captchaImage").fadeIn(300);
});
</jq:jquery>
</div>
person klogd    schedule 05.09.2012

arrow_upward
2
arrow_downward

Внесите эти изменения в JSP:

<img src="jcaptcha" id="captcha_image"/> <a href="#" onclick="reloadCaptcha()" alt="reload"width="40" height="40">Refresh</a>

Добавьте функцию Javascript, например:

function reloadCaptcha(){
        var d = new Date();
        $("#captcha_image").attr("src", "jcaptcha?"+d.getTime());
    }
person Srithar    schedule 16.06.2015

arrow_upward
0
arrow_downward

Вам нужно будет загрузить изображение и кнопку обновления в . Тогда вы сможете обновить только iframe. Но я не знаю, как вы выполняете свою проверку.

person MatBanik    schedule 25.06.2011

arrow_upward
0
arrow_downward

Установите идентификатор для тега img и позвольте ему вызывать функцию javascript:

<img src="jcaptcha.jpg" id="captchaImage"/>

функция JavaScript:

<script type="text/javascript">
    function refresh() 
    {
        var captchaImage=document.getElementById("captchaImage");
        captchaImage.src="jcaptcha.jpg";    
    }
</script>
person Doaa A.    schedule 01.04.2012

arrow_upward
0
arrow_downward

это отлично работает, потому что я реализовал это в своем проекте, просто создайте одну кнопку, нажав эту кнопку, она перейдет к нижеупомянутому блоку кода, подобному тому, что вы делаете

<script type="text/javascript">
function refresh() 
{
var image=document.getElementById("kaptchaImage");
image.src="<%=request.getContextPath()%>/kaptcha.jpg?"+Math.floor(Math.random()*100)           
}
</script>
person kristark    schedule 15.05.2014