Question

我有以下代码用于通过JavaScript刷新验证码图像。无论如何我还可以使用AJAX请求实现这一目标吗？

<script>
function refreshCaptcha() {
    $("#captcha_code").attr('src','captcha_code.php');
}

</script>

<button name="submit" onClick="refreshCaptcha();">Refresh Captcha</button>

Answer 1

您可以使用以下代码。

<script>
    $(document).ready(function() {
        setInterval(function() {
            $.post('captcha_code.php', function(data) {
                $('#captcha_code').html(data);
            });
        }, 1000);
    });
</script>

Answer 2

是的，但是你需要手动处理会话！

 <script>
 $(".RefreshCaptcha").click(function () {
     $.post('captcha_code.php', function(data, status){
         $("#captcha_code").attr('src', data);
         console.log("ajax log: " +  status);
     });         
 });
</script>
<button class="RefreshCaptcha">Refresh Captcha</button>

w3shcools ajax.post

Answer 3

是的，AJAX可用于通过Javascript更新图像更新。因为代码已经使用了jQuery，所以一种简单的方法是使用$.post()发布到PHP脚本。假设 captach_code.php 仅返回图像源（例如base-64编码的字符串），您可以将 src 属性设置为响应值（例如，在下面的函数 updateImage（）中。）

function refreshCaptcha() {
    $.post('captcha_code.php', updateImage);
}
function updateImage(response) {
      $("#captcha_code").attr('src',response);
}

在this phpfiddle中查看此操作。注意 - 无法控制文件名，因此使用PHP_SELF代替 captcha_code.php 。

$.post()返回jqXHR object，它实现了Promise接口。因此，可以使用.done()和其他类似函数，而不是指定成功回调：

function refreshCaptcha() {
    $.post('captcha_code.php')
    .done(function(response) {
          $("#captcha_code").attr('src',response);
     })
     .fail(function() {
         //fail handler...
     })
     .always(function() {
         //handler for all cases
     });
}

在this phpfiddle中查看此内容。

在Ajax调用上刷新Captcha

3 个答案: