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

Question

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

Контактная форма содержит сценарии reCaptcha.

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

Answer 1

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

В ссылке есть все, что вам нужно: 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>

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

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

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>