如何让 reCaptcha 与 ajax .load 一起工作

Question

我希望将reCaptcha与jquery '.load' ajax函数一起使用，以便将信息传递到我的PHP联系表单。 我已经确定了如何使用此方法发送名称值，主题值等内容，但是，我不确定如何传递reCaptcha信息。

目前，当我提交表单时，我收到一个PHP错误，建议"未定义的索引：g-recaptcha-response"。 我相信这与阿贾克斯方面有关。

这方面的任何帮助都会很棒，因为我完全不知所措！

j查询：

$("#contactForm").submit(function(event) {
  event.preventDefault();
  var name = $("#name").val();
  var email = $("#email").val();
  var subject = $("#subject").val();
  var phone = $("#phone").val();
  var company = $("#company").val();
  var message = $("#message").val();
  var submit = $("#submit").val();
$(".form-message").load("contactForm.php", {
   name: name,
   email: email,
   subject: subject,
   phone: phone,
   company: company,
   message: message,
   submit: submit
}); 

.PHP：

if(isset($_POST['submit'])) {
 require 'dist/PHPMailer/PHPMailerAutoload.php';
 $mail = new PHPMailer;
 $name = $_POST['name'];
 $email = $_POST['email'];
 $subject = $_POST['subject'];
 $phone = $_POST['phone'];
 $company = $_POST['company'];
 $message = $_POST['message'];
 $secretKey = "--KEY--";
 $responseKey = $_POST['g-recaptcha-response'];
 $userIP = $_SERVER['REMOTE_ADDR'];
 $url = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$userIP";
$response = file_get_contents($url);
 $mail->HOST = 'smtp.gmail.com';
 $mail->Port = 587;
 $mail->SMTPAuth = true;
 $mail->SMTPSecure = 'tls';
 $mail->Username = '--username--';
 $mail->Password = '--password--';
 $mail->setFrom('--email--', 'Contact Form Submission');
 $mail->addAddress('--email--');
 $mail->addReplyTo($email, $name);
 $mail->isHTML(true);
 $mail->Subject= $subject;
 $mail->Body='<p>Name: '.$name. '<br>Email: '.$email.'<br>Subject: '.$subject.'<br>Phone: '.$phone.'<br>Company: '.$company.'<br>Message: '.$message.'</p>';

.HTML：

<form method="POST" action="contactForm.php" id="contactForm">
    <div class="form-group">
      <input
        type="text"
        id="name"
        name="name"
        class="form-control"
        placeholder="Full Name"
      />
    </div>
    <div class="form-group">
      <input
        type="text"
        id="email"
        name="email"
        class="form-control"
        placeholder="Email Address"
      />
    </div>
    <div class="form-group">
      <input
        type="text"
        id="subject"
        name="subject"
        class="form-control"
        placeholder="Subject"
      />
    </div>
    <div class="form-group">
      <input
        id="phone"
        type="text"
        name="phone"
        class="form-control"
        placeholder="Phone (optional)"
      />
    </div>
    <div class="form-group">
      <input
        id="company"
        type="text"
        name="company"
        class="form-control"
        placeholder="Company (optional)"
      />
    </div>
    <div class="form-group">
      <textarea
        class="form-control"
        id="message"
        name="message"
        placeholder="Message"
        style="height: auto"
        rows="5"
      ></textarea>
    </div>
    <div
      class="g-recaptcha"
      data-sitekey="--KEY--"
    ></div>
    <input
      id="submit"
      type="submit"
      value="Submit"
      class="btn btn-outline-primary btn-block mb-3"
      name="submit"
    />
  </form>

Answer 1

您可以使用 grecaptcha.getResponse（） 方法从客户端获取验证码的值，然后使用该值与 ajax/jquery 一起发送

<script type="text/javascript">

    ("#contactForm").submit(function(event) {
  event.preventDefault();
  var name = $("#name").val();
  var email = $("#email").val();
  var subject = $("#subject").val();
  var phone = $("#phone").val();
  var company = $("#company").val();
  var message = $("#message").val();
  var submit = $("#submit").val();
  var captcha = grecaptcha.getResponse(); //get captcha
$(".form-message").load("contactForm.php", {
   name: name,
   email: email,
   subject: subject,
   phone: phone,
   company: company,
   message: message,
   submit: submit,
   captcha : captcha
}); 

</script>

然后你的 php

<?php

if(isset($_POST['submit'])) {
 require 'dist/PHPMailer/PHPMailerAutoload.php';
 $mail = new PHPMailer;
 $name = $_POST['name'];
 $email = $_POST['email'];
 $subject = $_POST['subject'];
 $phone = $_POST['phone'];
 $company = $_POST['company'];
 $message = $_POST['message'];
 $secretKey = "--KEY--";
 $responseKey = $_POST['captcha']; //captcha
 $userIP = $_SERVER['REMOTE_ADDR'];
 $url = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$userIP";
$response = file_get_contents($url);
 $mail->HOST = 'smtp.gmail.com';
 $mail->Port = 587;
 $mail->SMTPAuth = true;
 $mail->SMTPSecure = 'tls';
 $mail->Username = '--username--';
 $mail->Password = '--password--';
 $mail->setFrom('--email--', 'Contact Form Submission');
 $mail->addAddress('--email--');
 $mail->addReplyTo($email, $name);
 $mail->isHTML(true);
 $mail->Subject= $subject;
 $mail->Body='<p>Name: '.$name. '<br>Email: '.$email.'<br>Subject: '.$subject.'<br>Phone: '.$phone.'<br>Company: '.$company.'<br>Message: '.$message.'</p>';