帶有AJAX的PHP Google reCAPTCHA無法正常工作

Question

我在100.php中有使用ajax調用200.php的形式。

<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調用新手。 我用谷歌搜索，可以通過螢火蟲進行故障排除。 你能說我在做什么錯嗎？ 以及通過Firebug進行故障排除的步驟，例如檢查我的Ajax調用是否完成等？ 謝謝你的幫助。

注意：當我將所有這些代碼放在一頁中而不使用ajax調用時。 它工作正常！ 我希望這種情況不會重新加載頁面。

輸出

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

?>

Answer 1

您的代碼中幾乎沒有錯誤，例如：

看下面兩個語句，

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

和

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

您不會將任何名為ok變量發送到200.php頁面，因此控件甚至不會輸入if塊。

您以錯誤的方式驗證reCaptcha。 從文檔中：

如果您的網站使用AJAX請求執行服務器端驗證，則只應驗證一次用戶的reCAPTCHA響應令牌（ g-recaptcha-response ）。 如果使用特定令牌進行了驗證嘗試，則無法再次使用它。 您將需要調用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>";
    }

?>

帶有AJAX的PHP Google reCAPTCHA無法正常工作

問題描述

1 個解決方案

解決方案1
0 已采納 2016-05-15 11:16:53

帶有AJAX的PHP Google reCAPTCHA無法正常工作

問題描述

1 個解決方案

解決方案1 0 已采納 2016-05-15 11:16:53

解決方案1
0 已采納 2016-05-15 11:16:53