Как загрузить форму reCaptcha с помощью jQuery/AJAX, оставив скрипты reCaptcha на месте?

Я загружаю свою контактную форму на свою страницу с помощью JQuery/AJAX.

Форма контакта содержит сценарии reCaptcha.

К сожалению, JQuery удаляет теги script, прежде чем вставлять их на мою страницу. Эти теги script необходимы, потому что они выводят captcha. теперь моя загруженная форма не имеет никакой надписи.

Ответ 1

В ссылке есть все, что вам нужно: http://code.google.com/apis/recaptcha/docs/display.html

Вы не можете добавить script в ajax. Вы должны добавить следующую строку:

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

Затем вы можете динамически создать форму recaptcha в вашем js-коде, используя следующий код:

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

Ответ 2

@benck, отличный ответ! Но это немного устарело. Текущий script 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);
    }
});

Ответ 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>