web-dev-qa-db-ja.com

reCaptchaスクリプトを残したまま、jQuery / AJAXを使用してreCaptchaフォームをロードするにはどうすればよいですか？

お問い合わせフォームをJQuery/AJAXを使用してページにロードします。

お問い合わせフォームにはreCaptchaスクリプトが含まれています。

残念ながら、JQueryはページに挿入する前にスクリプトタグを削除します。これらのスクリプトタグは、キャプチャを出力するために必要です。ロードされたフォームにはキャプチャがありません。

jqueryajaxcakephprecaptcha
25
eSentrik

リンクには必要なものがすべて含まれています： 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コードで動的にreaptchaフォームを作成できます。

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

@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);
    }
});
21
Oleg

私のアプローチは少し異なります：

<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>
0
szmegma