如何使reCaptcha与Ajax .load一起使用

时间:2019-01-21 09:41:19

标签: php jquery ajax recaptcha

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

目前,我提交表单时收到一个PHP错误,提示“未定义索引:g-recaptcha-response”。我相信这与Ajax方面有关。

在这方面的任何帮助都会令人惊奇,因为我全神贯注!

jQuery:

$("#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>

1 个答案:

答案 0 :(得分: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>';