使用AJAX重新加载验证码
这个问题可能已经被问过 - 但不幸的是，我找不到任何令人满意的答案。我只会询问我的具体情况，并要求管理员至少在几天内不要删除该问题，以便我可以尝试一下......
我有一个页面。它使用验证码。就像这样：
<?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 参数。该字符串确实是随机的。
编辑：因此，我想知道的是如何使浏览器重新加载图像，而无需在每次事件触发时传递不同的获取参数。
This question may have been asked already - but unfortunately, I could not find any satisfactory answers. I will just ask it for my concrete case and ask the admins not to delete the question for at least a few days so I can try it out...
I have a page. It uses a captcha. Like so:
<?php
session_start(); // the captcha saves the md5 into the session
?>
<img src="captcha.php" onclick="this.src = this.src" />
That was my first code. It did not work, because the browser condsidered it useless to reload an image if the source is the same. My current solution is to pass a get parameter:
onclick="this.src = 'captcha.php?randomNumber='+ranNum"
The JavaScript variable var ranNum is generated randomly every time the onclick event fires. It works fine, still, I don't like the possibility, if the - though improbable - case of two numbers being the same twice in a row. Although the random number varies between -50,000 and 50,000 - I still do not like it. And I don't think the method is right. I would like to know the 'righter' method, by means of AJAX. I know it's possible. I hope you know how it's possible ^^ In that case, please show me.
Thanks in advance!
By the way - if I spell cap(t)cha differently, never mind, the reference to the PHP file is right in my code: I use randomImage.php
EDIT: The random number in JavaScript is only generated so the image reloads. Captcha.php does not care for the $_GET parameter. The string really is random.
EDIT: Thus, what I would like to know is how to make the browser relaod the image without passing different get parameters every time the event fires.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
不幸的是，AJAX 没有提供动态加载图像的好方法。即使使用 javascript“预加载”技巧，也只能让浏览器为每个 URL 加载每个图像一次。让浏览器从同一源加载另一个图像的唯一好方法是使用不同的参数，就像您现在所做的那样。而且，就像其他答案所说的那样，时间戳应该足够了。
Unfortunately, AJAX doesn't provide a good way to dynamically load images. Even using the javascript "preload" trick just gets the browser to load each image once per URL. The only good way to get the browser to load another image from the same source is to use a different parameter just like you are doing now. And, like other answers have stated, timestamp should be sufficient for that.
您是否考虑过使用时间戳来代替？
Have you considered using a timestamp instead?
只需使用：
您可以丢弃时间参数并在 PHP 中生成随机数。 :)
Just use:
<img src="captcha.php" onclick='this.src = "captcha.php&time=" + new Date().getTime();' />You can discard the time parameter and generate the random number in PHP. :)
您还可以从 Ajax 请求中获取经过 base64 编码的图像，并将其放入 img 标签中。
当然，我认为这有点过分了，base64 编码的文件大约是原始文件大小的 4/3。 （3 kb 的图像在 Base64 上约为 4kb）。
编辑：
具有 img src 属性，如
data:image/png;base64,base64encodedimage
You could also get the image from an Ajax request base64 encoded and put it into the img tag too.
Of course I think it is overkill and a base64 encoded file is about 4/3 of the original's size. (A 3 kb image would be about 4kb on base64).
Edit:
to have the img src attribute like
data:image/png;base64,base64encodedimage