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 が有効になっているユーザーに対処するスクリプトの上部にある追加の行に注意してください。

したがって、質問は2つあると思います。WTF が発生しています。どうすれば修正できますか?

この問題について漠然とした言及を見つけましたが、適切な回答はありません。を使用した 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;
                });
        }
     );
 });

私がこれまでに試したこと：

4

2 に答える 2

8

説明：

これがAJAXで機能しない理由は、jQueryがscriptHTMLからタグを削除してからDOMに追加し、グローバルコンテキストで評価するためです。HTMLの他の部分と一緒にDOMに挿入することはありません。

あなたのコードでは：

コードの原因は次の行です。

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

サーバーから受け取った生のHTML文字列を取得し、それをDOMに追加します。ただし、jQueryは最初に変数scriptからタグをdata削除し、グローバルコンテキストでそれを評価します。

recaptcha.jsスクリプトはdocument.writeその内容をDOMに追加するために使用するため、壊れます。document.writeHTMLを出力する場所で正確に実行する必要があります。

ソリューション：

2つの可能な解決策があります。

解決策＃1：

jQueryに完全に依存する代わりに、scriptバニラJavaScriptを使用してタグを自分で挿入することもできます。これにより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" />');
}
于 2012-07-30T22:20:00.107 に答える
0

/inc/email.phpファイルのすべてをエコーできます。事前に必要なファイルをすべて含める必要があります。

于 2012-07-30T23:04:16.777 に答える