php - 使用 AJAX 重新加载验证码

Question

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

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

<?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"

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

提前致谢！

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

只需使用：

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

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

Answer 4

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

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

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

数据：图像/png；base64，base64encodedimage