谷歌隐形recaptcha使用jquery和PHP

我正在尝试在我的网站上添加Google的隐形回收 . 它基本上是联系我们表单，用户提交他的姓名，电子邮件和消息，点击提交将触发邮件给我们 .

我打算用php来处理邮件部分 . 但是，我无法过去在jquery中提交表单 .

This is my html :

<div class="row">
    <script src="mail.js"></script>
    <form id="main-contact-form" name="contact-form">
        <div class="form-group">
            <input type="text" name="name" class="form-control" placeholder="Name" required>
        </div>
        <div class="form-group">
            <input type="email" name="email" class="form-control" placeholder="Email" required>
        </div>
        <div class="form-group">
            <textarea name="message" class="form-control" rows="2" placeholder="Message" required></textarea>
        </div>
        <button class="g-recaptcha btn btn-primary" data-sitekey="6LdGAiQUAAAAAHeNXI3yDSsZhLAJs7U1HX_zXm8o" data-callback="onSubmit" type="submit">Submit</button>
    </form>
</div>

The onSubmit callback:

function onSubmit(response) {
    var request;
    console.log('here');
    document.getElementById('main-contact-form').submit();
}

The jQuery code for passing the submitted form to the php where verification of the captcha is done mail is sent:

$("#main-contact-form").submit(function(event) {

    // Prevent default posting of form - put here to work in case of errors
    event.preventDefault();
    console.log('in here');
    // Abort any pending request
    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);

    // Let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");

    // Serialize the data in the form
    var serializedData = $form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);

    // Fire off the request to /form.php
    request = $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData
    });

    // Callback handler that will be called on success
    request.done(function(response, textStatus, jqXHR) {
        // Log a message to the console
        console.log("Hooray, it worked!");
    });

    // Callback handler that will be called on failure
    request.fail(function(jqXHR, textStatus, errorThrown) {
        // Log the error to the console
        console.error(
            "The following error occurred: " +
            textStatus, errorThrown
        );
    });

    // Callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function() {
        // Reenable the inputs
        $inputs.prop("disabled", false);
    });


});

Php code for mailing:

<?php
        $name;$email;$message;$captcha;
        if(isset($_POST['name'])){
          $name=$_POST['name'];
        }if(isset($_POST['email'])){
          $email=$_POST['email'];
        }if(isset($_POST['message'])){
          $message=$_POST['message'];
        }if(isset($_POST['g-recaptcha-response'])){
          $captcha=$_POST['g-recaptcha-response'];
        }
        if(!$captcha){
          exit;
        }
        $secretKey = "secret key";
        $ip = $_SERVER['REMOTE_ADDR'];
        $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha.);
        $responseKeys = json_decode($response,true);
        if(intval($responseKeys["success"]) !== 1) {
          echo '<h2>Message could not be sent</h2>';
        } else {
          $name       = @trim(stripslashes($name)); 
          $from       = @trim(stripslashes($email)); 
          $subject    = @trim(stripslashes('contact')); 
          $message    = @trim(stripslashes($message)); 
          $to       = 'email@email.com';//replace with your email

          $headers   = array();
          $headers[] = "MIME-Version: 1.0";
          $headers[] = "Content-type: text/plain; charset=iso-8859-1";
          $headers[] = "From: {$name} <{$from}>";
          $headers[] = "Reply-To: <{$from}>";
          $headers[] = "Subject: {$subject}";
          $headers[] = "X-Mailer: PHP/".phpversion();

          mail($to, $subject, $message, $headers);
          echo '<h2>Thanks for posting comment.</h2>';
        }
?>

?>

PHP代码可能不正确，我还没有解决（之前我没有使用过PHP） .

现在，当我尝试提交表单时，页面将重新加载表单作为地址栏中的查询参数 . 甚至，当在Recaptcha的 onSubmit 回调中提交表单时 event.preventDefault() ，它会重新加载页面 .

请帮助我完成这项工作 . 此外，我不想在提交表单时刷新页面，因为我打算使用 ajax 将表单输入发送到php脚本 .