无法在 JQuery Ajax 返回时刷新 reCaptcha答案

【问题标题】：Can't refresh reCaptcha on JQuery Ajax return无法在 JQuery Ajax 返回时刷新 reCaptcha
【发布时间】：2012-04-17 16:18:29
【问题描述】：

我正忙着让 Ajax 在 JQuery AJAX 回调上自动刷新。我有一个评论框，消息在验证 reCaptcha 后立即发布，如果 reCaptcha 可以自动刷新以防有人想在之后立即添加另一条评论，那就太好了。这是我的返回函数：

 $.post(url, formData, function(data) {
        if (returnString.match(/^Error:/)) {
          $("#interactionResults").html(data).show().fadeOut(6000);
        }
        else if (postNumber == 0) {
          $('#newCommentDisplay').html(returnString).show();
          $.post("http://www.google.com/recaptcha/api", "Recaptcha:reload()");   
        }

当我使用时：

$.post("http://www.google.com/recaptcha/api", "Recaptcha:reload()");

我收到一个错误：

XMLHttpRequest cannot load http://www.google.com/recaptcha/api. Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin.

很公平，所以我尝试用这条线来改变这条线：

$('#recaptcha_reload_btn').trigger('click');

仍然没有发生任何事情。有谁知道发生了什么？

【问题讨论】：

啊，“什么都没有发生”的字面意思是什么都没有，还是你还在谈论 Google 错误？
是的，我真的没什么意思。抱歉，我没有说得更清楚。
那么你需要展示你的点击处理程序。那里一定有问题。
@marue 它在一个 iframe 中，我认为这可能会让我绊倒。我想我可能需要将 JSON 对象发送回 Google。这是 iframe：google.com/recaptcha/api/…" height="300" width="500" frameborder="0">
嗯，从 iframe 中捕获事件并不容易，我什至不确定是否可能。如果您在该 iframe 之外，则可以使用此帖子中的答案stackoverflow.com/questions/4249809/…

标签： javascript jquery ajax cors recaptcha

【解决方案1】：

在我的 html 中我有：

<div class="g-recaptcha" id='recaptcha' data-sitekey="xxxxxxxxxx"></div>

我用grecaptcha.reset();

示例： if (typeof $('#recaptcha') != "undefined") { grecaptcha.reset(); }

【讨论】：

如果您想更新答案，请编辑答案添加详细信息而不是评论
自 2015 年 4 月（或更早）起，Google 有了新的验证码。使用grecaptcha.reset(); 是帮助我的正确答案。

【解决方案2】：

使用

jQuery("#recaptcha_reload").click();

“#recaptcha_reload”，图像本身，是触发器。 #recaptcha_reload_btn 将不起作用，因为 a-tag 不是触发器。

【讨论】：

+1 因为无论使用哪个库来显示验证码，它都可以工作。但是，如果您碰巧使用了 javascript 库，Recaptcha.reload(); 会更好。

【解决方案3】：

Recaptcha.reload();

（验证码已加载）

【讨论】：

【解决方案4】：

如果您使用的是新的 recaptcha 2.0，请使用：后面的代码：

ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);

对于简单的javascript

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>

【讨论】：

【解决方案5】：

您尚未将点击处理程序绑定到您的元素。来自 jQuery 文档：

.trigger( eventType [, extraParameters] )

描述：执行所有附加到给定事件类型的匹配元素。

如果您在调用触发器之前没有将处理程序附加到您的元素，则没有要执行的单击处理程序。

编辑：

当您编写$('#recaptcha_reload_btn').bind('click'); 时，您实际上设置了一个点击处理程序，但它什么也不做。您必须告诉点击处理程序该做什么：

$('#recaptcha_reload_btn').bind('click',function() {
    alert('you just clicked me');
};

如果不设置回调处理程序，则事件只是注册但不会触发任何操作。将此与此问题Reload an iframe with jQuery 的解决方案结合起来，您应该让您的recaptcha 做您想做的事情：

$('#recaptcha_reload_btn').bind('click',function() {
    var iframe = document.getElementById('#recaptcha'); //use your own selector here!
    iframe.src = iframe.src;
};

【讨论】：

添加 $('#recaptcha_reload_btn').bind('click');由于某种原因仍然对我不起作用:(

【解决方案6】：

$( "#recaptcha_reload_btn" ).click();

【讨论】：

Proximo 的回答是正确的$("#recaptcha_reload").click();