使用 AJAX 重新加载验证码答案

【问题标题】：Use AJAX to reload captcha使用 AJAX 重新加载验证码
【发布时间】：2011-02-19 23:13:51
【问题描述】：

这个问题可能已经被问过了 - 但不幸的是，我找不到任何令人满意的答案。我将就我的具体情况询问它，并要求管理员至少在几天内不要删除该问题，以便我可以尝试...

我有一个页面。它使用验证码。像这样：

<?php
session_start(); // the captcha saves the md5 into the session
?>
<img src="captcha.php" onclick="this.src = this.src" />

那是我的第一个代码。它不起作用，因为浏览器认为如果源相同，重新加载图像是没有用的。我目前的解决方案是传递一个get参数：

onclick="this.src = 'captcha.php?randomNumber='+ranNum"

每次触发onclick 事件时，都会随机生成 JavaScript 变量 var ranNum。它工作得很好，尽管如此，我不喜欢这种可能性，如果 - 虽然不太可能 - 两个数字连续两次相同的情况。尽管随机数在 -50,000 和 50,000 之间变化 - 我仍然不喜欢它。而且我认为方法不对。我想通过 AJAX 了解“更正确”的方法。我知道这是可能的。我希望你知道这是怎么可能的^^在那种情况下，请告诉我。

提前致谢！

顺便说一句 - 如果我拼写不同的 cap(t)cha，没关系，对 PHP 文件的引用在我的代码中是正确的：我使用 randomImage.php

编辑：JavaScript 中的随机数仅生成，以便重新加载图像。 Captcha.php 不关心 $_GET 参数。这个字符串真的是随机的。

编辑：因此，我想知道的是如何让浏览器重新加载图像，而无需在每次事件触发时传递不同的 get 参数。

【问题讨论】：

是的，我想没有什么比读书更重要了；）

标签： php javascript ajax captcha reload

【解决方案1】：

很遗憾，AJAX 没有提供动态加载图像的好方法。即使使用 javascript“预加载”技巧，也只是让浏览器在每个 URL 上加载每个图像一次。让浏览器从同一来源加载另一个图像的唯一好方法是使用不同的参数，就像您现在所做的那样。而且，就像其他答案所说的那样，时间戳应该足够了。

【讨论】：

嗯...这很不幸。谢谢。
看起来它超出了语言（PHP）的范围，并且在Web服务器的范围内。我还没有尝试过，但我认为如果您使用的是 apache，您可以使用像 [rewrite] (httpd.apache.org/docs/2.4/rewrite/remapping.html) 这样的模块将任何请求映射到 /captcha* 到您的 php 中，从而消除对获取参数。那是如果您还管理网络服务器并且它是 apache。其他服务器可能还有其他方式。

【解决方案2】：

您是否考虑过使用时间戳？

onclick="this.src='captcha.php?ts='+Math.round(new Date().getTime()/1000)"

【讨论】：

听起来很有趣。不会有重复编号的风险。不过，我想知道它是如何使用 AJAX 完成的 ^^
这是异步的，并且使用了 JS，因此它是 AJAX。
@Nico：没有 XML，也没有使用 XMLHttpRequest，因此在技术上它不是 AJAX。当浏览器检测到新来源时，它只是为您加载图像。
您可以调用服务器发送新的图像源，这将是服务器生成的时间戳，例如onclick="captcha.php?ts=<?php echo time() ?>"。但是，我认为这样做并没有什么真正的好处，这似乎是做同样事情的另一种方式。
那行不通。 time() 会预先生成一次，但以后会一样，因此源不会改变，图像不会重新加载。

【解决方案3】：

只需使用：

<img src="captcha.php" onclick='this.src = "captcha.php&time=" + new Date().getTime();' />

您可以丢弃时间参数并在 PHP 中生成随机数。 :)

【讨论】：

谢谢。对不起，问题不清楚，我确实忽略了 get 参数。它仅用于强制浏览器重新加载图片；）不过，我想知道如何在不传递随机获取参数的情况下强制浏览器重新加载图片。
@arik-so 据我所知，没有办法做到这一点。如果浏览器看到图像的 src 相同，则不会重新加载它。我最近研究了一个类似的问题，这几乎是我找到的唯一解决方案。当然，如果有人知道另一种选择，我会很高兴知道的！
好吧，我会等待，让问题悬而未决。也许有人会找到答案。

【解决方案4】：

您也可以从 Ajax 请求 base64 编码中获取图像，并将其放入 img 标签中。

当然，我认为这太过分了，base64 编码的文件大约是原始文件大小的 4/3。（一个 3 kb 的图像在 base64 上大约是 4kb）。

编辑：拥有类似的 img src 属性

data:image/png;base64,base64encodedimage

【讨论】：