Question

我使用JQuery / AJAX将我的联系表单加载到我的页面中。

联系表格包含reCaptcha脚本。

不幸的是，JQuery在将脚本标签插入我的页面之前删除了它们。需要这些脚本标记，因为它们输出验证码。现在我加载的表单没有验证码。

Answer 1

该链接可满足您的所有需求：http://code.google.com/apis/recaptcha/docs/display.html

您无法在ajax中添加脚本。您应该在之前添加以下行：

  <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

然后，您可以使用添加以下代码在js代码中动态创建recaptcha表单：

  Recaptcha.create("your_public_key",
    "element_id",
    {
      theme: "red",
      callback: Recaptcha.focus_response_field
    }
  );

Answer 2

@benck，很棒的答案！但它已经过时了。当前脚本URL为：

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>

代码应如下所示：

grecaptcha.render('element_id', {
    sitekey: recaptchaSiteKey,
    callback: function(response) {
        console.log(response);
    }
});

Answer 3

我的方法有点不同：

<script src='https://www.google.com/recaptcha/api.js?render=explicit' async defer></script>
<form>
    <input name="whatEver" type="text">
    <div id="captcha"></div>
    <button>submit</button>
</form>
<script>
var captchaWidgetId = grecaptcha.render( 'captcha', {
    'sitekey' : 'your_site_key'
    'theme' : 'light'
});
$(document).ready(function(){
    $('form').on('click','button', function(e){
        var formDatas = $(this).closest('form').serialize()+'&response='+grecaptcha.getResponse(captcha);
        $.post('post.php', formDatas, function(data){
            //successful
        });
    });
});
</script>

如何在保留reCaptcha脚本的同时使用jQuery / AJAX加载reCaptcha表单？

3 个答案: