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());

无法将reCaptcha集成到通过AJAX提交的PHP联系人表格中

1 个答案: