PHP谷歌reCAPTCHA與AJAX不起作用

我有100.php與ajax調用200.php窗體。PHP谷歌reCAPTCHA與AJAX不起作用

<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名稱和地址經過用戶。但我的問題是，當我輸入姓名和地址時，點擊驗證碼。 Captha也被驗證並顯示在我的屏幕截圖中。但名稱和地址不顯示在頁面上。你也可以在這裏檢查一下自己：http://raveen.comlu.com/100.php

我是新來的PHP的Ajax調用。我GOOGLE了，我可以通過螢火蟲排除故障。你能說我在這裏做錯了嗎？以及如何檢查我的ajax調用是否完成等螢火蟲疑難解答的步驟？謝謝你的幫助。

注意：當我把所有這些代碼放在一個頁面中而不使用ajax調用。它工作正常!!!!!我想這種情況沒有頁面重載....

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>"; 
     } 
    } 

?>

來源

2016-05-15 Lena Stein

您使用的是Google recaptcha V2嗎？ –

@RajdeepPaul，先生，我不知道。我怎麼知道的？ –

我在下面給出了一個答案。希望這會解決你的問題。 –

有在你的代碼少的錯誤，如：

看以下兩條陳述，

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

和

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

你不發送名爲ok任何變量200.php頁面，因此控制甚至不會進入if塊。

您正以錯誤的方式驗證reCaptcha。從the documentation：

如果您的網站使用AJAX請求執行服務器端驗證，你應該只驗證用戶的驗證碼響應令牌（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 page，處理您的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>"; 
    } 

?>

來源

2016-05-15 11:16:53

先生，您的解決方案運作良好。謝謝。但我有幾個問題。如果我理解正確，請糾正我。 1）在200.php中，我不需要require_once（'recaptchalib.php'）;不再是因爲這個類的功能現在是由我們自己完成的嗎？ grecaptcha.getResponse（）和grecaptcha.reset（）由這個JavaScript庫提供？ 2）http://raveen.comlu.com/100.php這是你的代碼運行良好。 –

當我點擊發送時，我可以看到Chrome標籤正在加載幾秒鐘？所以我取消了這一行的註釋//$('#testform')[0].reset();//reset the form ,,,, to check ajax call？據我所知，如果頁面重新加載，所有輸入數據都會丟失。但在這種情況下，他們不會丟失。所以我可以知道ajax調用工作。我是否正確地檢查Ajax電話？如何檢查它在螢火蟲？ –

@LenaStein 1）沒有必要在這裏使用任何庫，Google reCaptcha腳本將處理所有事情。 2）是的，''grecaptcha.getResponse（）'和'grecaptcha.reset（）'由這個JavaScript庫提供。 3）你可以去* console *面板的螢火蟲檢查AJAX請求/響應。 –

PHP谷歌reCAPTCHA與AJAX不起作用

回答

相關問題