logo标签列表

通过AJAX加载的页面上的reCAPTCHA字段无法加载。有什么建议吗？

phpjqueryrecaptcha
3

实时示例：

当我查看源页面时，一切正常，但是当我通过AJAX请求加载时，在应该出现reCAPTCHA的地方，我看到...

<noscript>
  <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfwkccSAAAAALr_z6vDBqkySowo5KIiR0mVM1BX" height="300" width="500" frameborder="0"></iframe><br/>
  <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>

显然，这只有在我的用户禁用JS时才无法实现。在此过程中不会出现任何错误。

查看非AJAX请求的代码时，我看到...

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfwkccSAAAAALr_z6vDBqkySowo5KIiR0mVM1BX"></script>

<noscript>
  <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfwkccSAAAAALr_z6vDBqkySowo5KIiR0mVM1BX" height="300" width="500" frameborder="0"></iframe><br/>
  <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>

请注意脚本顶部增加的一行，该行面向启用JS的用户。
所以我的问题有两个方面。到底是怎么回事，我该如何解决？
我找到了一些关于这个问题的模糊提及，但没有一个合适的答案。我发现一些关于reCAPTCHA API使用document.write的提及，但我不确定它是否有效。如果我忽略了一些明显的东西，请随时指出。
根据请求，AJAX调用为...
$(document).ready(function() {
     $.get('/inc/email.php', 
           function(data){
                console.log('Get success!');
                $('#email-form').html(data);
                console.log('Get added to #email-form!');
                $('#email-form form').submit( function(){
                    $.ajax({
                      type: "POST",  
                      url: "/inc/email.php",  
                      data: $('#email-form form').serialize(),  
                      success: function() {
                            console.log('Submit success!');
                            $('#email-form').html(data);
                      }
                    });
                    return false;
                });
        }
     );
 });

我尝试过的方法：

我认为你需要包含ajax调用和响应（使用firebug），这样社区才能帮助你。 - Martin Müller
我忘了提到这个查询不会抛出任何错误。我可以包含AJAX调用，但我怀疑它不会添加任何额外的信息。这是一个简单的GET请求。 - Dan
有趣的事情在于响应。如果谷歌一开始就给出了错误的代码，那么你的调用（API密钥或其他）肯定有问题。 - Martin Müller
@MartinMüller，如果独立查看页面而不使用 AJAX 时加载完美，那么我的调用有什么问题呢？ - Dan
我在问题的顶部添加了有和没有使用AJAX的实时示例。 - Dan
显示剩余2条评论
2个回答
8

说明：

使用AJAX时出现错误的原因是jQuery在将HTML附加到DOM之前会剥离任何script标签，并在全局上下文中进行评估。它不会与其余HTML一起插入到DOM中。

在你的代码中：

导致问题的是这行代码：

$('#email-form').html(data);

你正在处理从服务器接收到的原始HTML字符串，并将其附加到DOM中。然而，jQuery 首先从你的data变量中删除script标签, 并在全局上下文中评估它。
由于recaptcha.js脚本使用document.write将其内容添加到DOM中，因此它会出错；document.write必须在你想要输出HTML的确切位置运行。

解决方案：

有两种可能的解决方案。

解决方案 #1：

不要完全依赖于jQuery，而是使用原生JavaScript自己插入script标签，这将导致document.write在您想要的位置运行 - 就在DOM中：

success: function() {
    var form = $('#email-form')[0],
        script = $('<script src="http://www.google.com/recaptcha/api/challenge?k=6LfwkccSAAAAALr_z6vDBqkySowo5KIiR0mVM1BX" />')[0];

    form.appendChild(script);
}

请注意这些行末尾的[0]。它们用于访问底层的本地DOM对象，以便我们可以使用DOM的本机appendChild。

解决方案＃2：

不要通过AJAX加载数据，考虑将其放在自己的页面中，然后只需在您的页面中插入一个iframe：

success: function() {
    $('#email-form').html('<iframe src="path/to/reCAPTCHA/page.html" />');
}
0

你可以在/inc/email.php文件中使用echo输出所有内容！但是你需要提前包含所有必要的文件。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接