Question

好的，我实际上是在调用一些返回验证码图像的java中间件。验证码图像在页面加载页面加载时只需：

<a href="#" id="ci"><img id="stickyImg" src="stickyImg" /></a>

我想重新加载当前验证码图像的验证码图像。我尝试了一些事情，但没有得到任何工作。

通过“尝试了一些事情”我的意思是我尝试过：

$("#ci").click(function(){

        $("#stickyImg").load('stickyImg');

        return false;
    });

确实加载了图像，但它是通过将原始二进制图像数据放在图像标记中来实现的，所以我得到了：

<img src="stickyImg"><img xmlns="http://www.w3.org/1999/xhtml">pngbinarygibberishsymbols</img>

嗯......也许我需要指定将图像放入src属性中？也许？你们都在想什么？

修改

唉！将响应放入我的img src会导致：

<img src="    * captcha image�PNG  ��� IHDR�������Ketc, etc">

输出原始二进制数据。到底是什么？

SOLUTION：

解决方案来自另一个类似的帖子，我在此发布。你可以read about it here.

最后（*编辑感谢Lee）代码看起来像：

$("#ci").click(function(){

        $("#stickyImg").attr('src', 'stickyImg?' + (new Date().getTime())); 
        return false;
    });

Answer 1

如果您要发布更完整的示例（包括将图像嵌入初始文档中的标记），将会很有帮助;但是做一些合理的假设，我认为你只需要以下内容......

假设您的标记类似于：

<div id="ci">
  <img src="/stickyImage" />
</div>

然后以下JS应该这样做：

$("#ci").click(function(){

    $("img",this).remove();
    $(this).html('<img src="/stickyImage" />');

    return false;
});

祝你好运。

[edit]如果您使用此代码加载在您的服务器上动态生成的图像（或由于某种原因可能会定期更改），那么您还需要确保正确地考虑了浏览器倾向于缓存它认为是静态的数据。有两种方法可以实现这一点（两种方法都可以）：

1）确保每次加载图像时网址始终不同。只需在图像URL的查询字符串部分附加一个随机数即可轻松完成此操作。因此，在上面的示例中，$(this).html('<img src="/stickyImage" />')将变为$(this).html('<img src="/stickyImage?"+(new Date().getTime()) />')。（这与OP最终确定的方法基本相同 - 参见上面的OP编辑。）

2）确保服务器返回图像数据，包括响应中正确的HTTP标头，以指示图像是动态的，不应缓存。你可以看到more details about how to send no-cache headers on this SO post。

以下是如何在Java servlet中设置所需的头文件：

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0); // Proxies.

选项＃2可能是解决缓存问题的“技术上更正确”的方法，但正如我上面所说 - 要么会工作，选项＃1是一种非常可靠的方法，通常比选项＃2容易得多。

所有这一切 - 缓存问题与此处提出的原始问题是一个单独的问题。原始问题涉及在HTML中内联显示二进制blob。该问题是由于错误使用jquery load()函数造成的。 OP决定使用attr()函数设置src属性的方法。我展示的方法涉及创建一个新的img元素，并删除旧元素。这两种方法都可以使用，但load()函数不能用于此目的。

Answer 2

这是一篇好文章： http://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html

我在这里引用： How do I load binary image data using Javascript and XMLHttpRequest?

Javascript - 加载图像onclick

2 个答案: