Question

这是我的 captcha.php 脚本：（它会创建一个图片）

// creating a image in this script and set its value on the session

此外，我在 contact_us.php 文件中有一个<img>，用于显示验证码图片：

<img src="http://localhost/captcha.php" class="captcha_pic" alt="Captcha">

此外，我还有一个用于在 contact_us.js 中提交该表单的ajax代码（此文件已发送至contact_us.php）：

$("#f_contact_form").on("submit", function (e) {
   e.preventDefault(e);
   $.ajax({
      url:  $("#f_contact_form").attr("action"),
      type: 'POST',
      data: $("#f_contact_form").serialize(),
      dataType : 'JSON',
      success: function (contact) {
        $(".contact_message").html(contact.message);

        // here I need to reload that image url for changing the captcha image

      }
   });
});

应该注意的是，当我使用 [inspect element] （在静态中）更改该图像的url然后我写出正确的名称时，图像将被更改。例如，我用src=".../captcha.ph"替换当前图像URL，然后我写了正确的名称src=".../captcha.php"，然后页面将被更改（正是我想要的）。

现在有重新加载验证码图像的解决方案吗？

Answer 1

您需要使用附加的唯一查询字符串重新加载图像，以防止浏览器缓存图像。最简单的方法是只追加当前时间。 Since you are already using jQuery, here's one way you can do it.

var unique = $.now();
$('.captcha_pic').attr('src', 'http://localhost/captcha.php?' + unique);

However, some people may recommend against this solution as it can fill up your cache.虽然替代方案需要您发送缓存控制标头。

Answer 2

那里有很多解决方案。以下是您的一些选择。

删除您的图片，然后创建一个新图片。

  $("#images").remove();
  $("div").html("<img src='http://localhost/captcha.php' class='captcha_pic' alt='Captcha'>")

使用unique来避免缓存。

 $("#f_contact_form").on("submit", function (e) {
 e.preventDefault(e);
    $.ajax({
       url:  $("#f_contact_form").attr("action"),
       type: 'POST',
       data: $("#f_contact_form").serialize(),
       dataType : 'JSON',
       success: function (contact) {
         $(".contact_message").html(contact.message);
         $('.captcha_pic').attr('src', 'http://localhost/captcha.php?' + new Date().getTime());
       }
    });
 });

Answer 3

$。now（）has been deprecated in jQuery 3.3。根据接受的答案的正确方法：

var unique = Date.now();
$('.captcha_pic').attr('src', 'http://localhost/captcha.php?' + unique);

如何使用ajax重新加载图像

3 个答案: