无法将 reCaptcha 集成到使用 AJAX 提交的 PHP 联系表单中

Question

我最近将 AJAX 添加到已经集成了 reCaptcha 的工作联系表单中，因此可以在不加载新页面的情况下提交表单，我在获取 g-recaptcha-response 时遇到问题。我让 reCaptcha PHP 代码与它工作时一样，我不确定我需要更改或添加什么才能让它再次工作。

表格：

  <form name="contact-form" action="mail.php" method="POST">
   <div class="col-6">
     <label for="name">Name*</label>
     <input type="text" name="name" placeholder="Your company.." required>

     <label for="company">Company*</label>
     <input type="text" name="company" placeholder="Your company.." required>

     <label for="phone">Phone</label>
     <input type="text" name="phone" placeholder="Your phone..">

     <label for="email">Email*</label>
     <input type="text" name="email" placeholder="Your email.." required>
   </div>
   <div class="col-6">
     <label for="message">Message*</label>
     <textarea  name="message" placeholder="Write something.." required></textarea>
     <div class="g-recaptcha" data-theme="light" data-sitekey="#"></div>
     <input id="submit" type="button" name="submit" value="SEND">
   </div>
  </form>

JavaScript：

 var submit = document.getElementById('submit');
 var form = document.forms["contact-form"];

 function submitFormAjax() {
   var name = form['name'].value;
   var company = form['company'].value;
   var phone = form['phone'].value;
   var email = form['email'].value;
   var message = form['message'].value;
   var xmlhttp= window.XMLHttpRequest ?
   new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

   xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       alert(xmlhttp.responseText);
     }
   }
   xmlhttp.open("POST","mail.php",true);
   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xmlhttp.send("name=" + name + "&company=" + company + "&phone=" + phone + "&email=" + email + "&message=" + message);
  }

 submit.onclick = function(e) {
   if (grecaptcha.getResponse() == ""){
     alert("Please click the reCAPTCHA checkbox!");
     return false;
   } else {
     submitFormAjax();
   }
 }

PHP 文件：

<?php
  //reCAPTCHA
  $public_key = "#";
  $private_key = "#";
  $url = "https://www.google.com/recaptcha/api/siteverify";

  $response_key = $_POST['g-recaptcha-response'];
  $response = file_get_contents($url.'?secret='.$private_key.'&response='.$response_key.'&remoteip='.$_SERVER['REMOTE_ADDRESS']);
  $response = json_decode($response);

  //For trouble shoooting
  // echo "<pre>";print_r($_POST);echo "</pre>";
  // echo "<pre>";print_r($response);echo "</pre>";

  if($response->success == 1) {
    $name = $_POST['name'];
    $company = $_POST['company'];
    $phone = $_POST['phone'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $formcontent=" From: $name \n Company: $company \n Phone: $phone \n Email: $email \n Message: $message";
    $recipient = "justin.toland@powereng.com, jason.pfaff@powereng.com";
    $subject = "Geovoice.io Inquiry";
    $mailheader = "From: $email \r\n";
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
  }     
?>

目前，在我点击提交按钮后，弹出警报说的第一件事是“未定义索引：g-recaptcha-response”。在这个例子中，我没有使用 reCaptcha 键。

Answer 1

您没有在 POST 调用中传递 g-recaptcha-response 参数，所以：

xmlhttp.send("name=" + name + "&company=" + company + "&phone=" + phone + "&email=" + email + "&message=" + message);

应该是

xmlhttp.send("name=" + name + "&company=" + company + "&phone=" + phone + "&email=" + email + "&message=" + message + "&g-recaptcha-response=" + grecaptcha.getResponse());