2016-05-15 2 views
0

100.phpに200.phpにajaxを呼び出してフォームを作成しました。PHP AJAXが動作していないGoogleのreCAPTCHA

<html> 
<head> 
    <!-- include reCAPTCHA API JavaScript library given by Google --> 
    <script src='https://www.google.com/recaptcha/api.js'></script> 

    <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script> 
    $(document).ready(function() {    
    $("#btn").click(function(event){ 
     event.preventDefault(); 

     var myname = $("#name").val(); 
     var myaddress = $("#address").val(); 
     var yourData ='name='+myname+'&address='+myaddress; // php is expecting name and age 
     $.ajax({ 
      type:'POST', 
      data:yourData,//Without serialized     
      url: '200.php', 
      success:function(data) { 
      if(data){ 
       $('#testform')[0].reset();//reset the form 
       $('#result').html(data); // here html() 
       //alert('Submitted'); 
      }else{ 
       return false; 
       }       
      } 
     }); 

     });    
    }); 
</script> 
</head> 
<body> 


    <form method="post" id="testform"> 
     Name: <input type="text" name="name" value="" id="name"/> <br /> 
     Address: <input type="text" name="address" value="" id="address"/> 
     <!-- 
      place for the reCAPTCHA widget div with your site key 
      data-theme="dark" attribute - gives dark version 
     --> 
     <div class="g-recaptcha" data-sitekey="6LeJ8h8TAAAAAMS9nQX89XccpsC-SDeSycipiaHN"></div> 
     <input type="submit" name="ok" value="Send" id="btn"/> 
    </form> 
    <div id='result'></div> 

</body> 

200.phpをキャプチャし、入力されたdiaplay名前とadddressユーザーを検証しません。しかし、私の問題は、名前と住所を入力したときにcaptchaをクリックすることです。 Capthaも検証され、私のスクリーンショットのように表示されます。名前と住所はページに表示されません。 http://raveen.comlu.com/100.php

私はPHPでAjaxを呼び出すのが初めてです。私はgoogledと私は火の虫でトラブルシューティングすることができます。私がここで間違っていることを言うことができますか?私のajaxコールが完了したかどうかを確認するような、火薬​​瓶のトラブルシューティングの手順?ご協力いただきありがとうございます。

注:これらのコードをすべてajax呼び出しを使用せずに1ページに入れると、それはうまくいく!!!!!私は、これはページのリロードなしで起こるたい....

output

200.php

<?php 
    require_once('recaptchalib.php'); 

    if(isset($_POST['ok'])){ 

     if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){ 
      $secret = "6LeJ8h8TAAAAAB3IFQVQEaoApFe6lvq4Wxlktvn1"; //your secret key 
      $response = null; //empty response 
      $reCaptcha = new ReCaptcha($secret); //check secret key is present 

      $response = $reCaptcha->verifyResponse($_SERVER['REMOTE_ADDR'], $_POST['g-recaptcha-response']); 

      //$response variable will report back with "success" 
      if($response!=null && $response->success){ 
       echo "<h1>Hi ". $_POST['name']. " from ". $_POST['address']. ", thanks for submitting the form!</h1>"; 
      } 
     } 
     else{ 
      echo "<h1>Please click on the reCAPTCHA box.</h1>"; 
     } 
    } 

?> 
+0

は、あなたがGoogleのreCAPTCHAのV2を使用していますか? –

+0

@RajdeepPaul、私は分かりません。それをどうやって知っていますか? –

+0

私は以下の答えを与えました。うまくいけば、これで問題は解決します。 –

答えて

0

など、あなたのコード内のいくつかのエラー、ありますで

  • ルックは、次の2つのステートメント、

    if(isset($_POST['ok'])){... 
    

    var yourData ='name='+myname+'&address='+myaddress; 
    

あなたはok 200.php にページという名前の変数を送信していないので、制御がさえifブロックに入りません。

  • あなたは間違った方法でreCaptchaを検証しています。 the documentationから:

あなたのウェブサイトはAJAX要求を使用して、サーバー側の検証を行った場合、あなたは一度だけ、ユーザーのreCAPTCHAの応答トークン(G-reCAPTCHAの応答)を確認する必要があります。特定のトークンで検証が試行された場合、再度使用することはできません。 grecaptcha.reset()に電話して、エンドユーザにreCAPTCHAで再度確認するように依頼する必要があります。

だから、ユーザーの応答を取得するためにgrecaptcha.getResponse()を使用する必要があります。

サイドノートとしてgrecaptcha.reset()を使用して、reCAPTCHAで再度確認するようにエンドユーザに依頼してください。

あなたのjQueryの/ AJAXスクリプトは次のようにする必要があります:

<script> 
    $(document).ready(function() {    
     $("#btn").click(function(event){ 
      event.preventDefault(); 

      var recaptchaResponse = grecaptcha.getResponse(); 

      var myname = $("#name").val(); 
      var myaddress = $("#address").val(); 
      var yourData = {name: myname, address: myaddress, recaptchaResponse: recaptchaResponse}; 
      $.ajax({ 
       type: 'POST', 
       data: yourData, 
       dataType: 'html', 
       url: '200.php', 
       success: function(data) { 
        // reset form 
        $('#testform')[0].reset(); 

        // display data 
        $('#result').html(data); 

        // reset the reCaptcha 
        grecaptcha.reset(); 
       }, 
       error: function(jqXHR, textStatus, errorThrown){ 
        // error 
       } 
      }); 
     });    
    }); 
</script> 

そして200に。PHPページ、プロセス、このようなあなたのAJAXデータ:

<?php 

    //your site secret key 
    $secret = '6LeJ8h8TAAAAAB3IFQVQEaoApFe6lvq4Wxlktvn1'; 

    if(isset($_POST['recaptchaResponse']) && !empty($_POST['recaptchaResponse'])){ 
     //get verified response data 
     $param = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$_POST['recaptchaResponse']; 
     $verifyResponse = file_get_contents($param); 
     $responseData = json_decode($verifyResponse); 

     if($responseData->success){ 
      // success 
      echo "<h1>Hi ". $_POST['name']. " from ". $_POST['address']. ", thanks for submitting the form!</h1>"; 
     }else{ 
      // failure 
      echo "<h1>You have incorrect captcha. Please try again.</h1>"; 
     } 

    }else{ 
     echo "<h1>Please click on the reCAPTCHA box.</h1>"; 
    } 

?> 
+0

あなたのソリューションはうまくいきます。ありがとう。しかし、私はいくつか質問があります。私が正しいことを理解すれば、私を修正してください。 1)200.phpで、私はrequire_once( 'recaptchalib.php')は必要ありません。もはやそのクラスの機能が今自分自身で行われているからです。 grecaptcha.getResponse()&grecaptcha.reset()は、このjavascriptライブラリによって提供されていますか? 2)http://raveen.comlu.com/100.phpこれはあなたのコードがうまく動作することです。 –

+0

[送信]をクリックすると、Chromeタブに数秒間の読み込みが表示されますか?だから、私はこの行のコメントを外しました//$('#testform')[0].reset();// ajax呼び出しをチェックするためにフォームを再構築しますか?ページがリロードされるとわかっているように、すべての入力データが失われます。しかし、この場合、それらは失われません。だから、私はajaxコールの作業を知ることができます。私はajaxコールをチェックする権利をしていますか?火かき棒でそれをチェックする方法? –

+0

@LenaStein 1)ここではライブラリを使用する必要はありません.Google reCaptchaスクリプトがすべてを処理します。 2)はい、 'grecaptcha.getResponse()'と 'grecaptcha.reset()'はこのjavascriptライブラリによって提供されています。 3)Firebugの* console *パネルでAJAXリクエスト/レスポンスを確認することができます。 –

関連する問題