时间戳

首页 > 解决方案 > 使用ajax同步隐形recaptcha

javascript - 使用ajax同步隐形recaptcha

问题描述

所以我试图弄清楚如何从 Recaptcha 获取令牌或有效响应，然后运行 ​​ajax 调用。有谁知道我怎么能同步做到这一点？

当用户单击提交时，过程将是：

  1. 能够通过所需的属性和模式验证表单字段
  2. 获取 Recaptcha 令牌或响应
  3. 如果 Recaptcha 响应良好，则运行 Ajax

function onSubmit(token) {

  grecaptcha.execute()
  var response = grecaptcha.getResponse();
  return response.length;
}

$('#contact-form').submit(function(event) {
  event.preventDefault();


  if (onSubmit()) {

    jQuery.ajax({
      url: "/ipostal-office/send-email.php",
      data: $('#contact-form').serialize(),
      type: "POST",
      complete: function(data) {
        console.log(data.responseText);
      },
      success: function(data) {
        // console.log(data);
        $('#contact-form').fadeOut();
        $('#success').fadeIn();
      },
      error: function(data) {
        console.log(data.responseText);
        $('#error').fadeIn();
        $('#contact-form').fadeOut();
      }
    });

  }
});
#form-div {
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  padding: 1rem 1rem 1.5rem 1rem;
}

#form-div .hide {
  display: none;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<div id="form-div">

  <h2>Contact Us to Learn More</h2>

  <div id="success" class="hide">
    <p>Your message was sent successfully! </p>
  </div>

  <div id="error" class="hide">
    <p>Something went wrong, <br> try refreshing and submitting the form again.</p>
  </div>

  <form id="contact-form" action="send-email.php" method="post">

    <div class="input-field-div">
      <input type="text" id="name" name="name" placeholder=" " minlength='2' pattern="^[a-zA-Z ]*$" title="Only letters and white space allowed" required>
      <label for="name">Name*</label>
    </div>

    <div class="input-field-div">
      <input type="text" id="title" name="title" placeholder=" ">
      <label for="title">Title</label>
    </div>

    <div class="input-field-div">
      <input type="text" id="company" name="company" minlength='2' placeholder=" " required>
      <label for="company">Company*</label>
    </div>

    <div class="input-field-div">
      <input type="text" id="address" name="address" placeholder=" ">
      <label for="address">Address</label>
    </div>

    <div class="input-field-div">
      <input type="email" id="email" name="email" placeholder=" " required>
      <label for="email">Email*</label>
    </div>

    <div class="input-field-div">
      <input type="tel" id="phone" name="phone" placeholder=" ">
      <label for="phone">Phone</label>
    </div>

    <div class="message-field-div">
      <textarea name="message" id="message" rows="7" placeholder=" " minlength='2' required></textarea>
      <label for="message">Message</label>
    </div>

    <div id='recaptcha' class="g-recaptcha" data-sitekey="6LebLMwZAAAAAEGMbnSYotyk9do2pAXL97t0-6C8" data-callback="onSubmit" data-size="invisible"></div>

    <button id="submit-btn" type="submit">
                        Submit <i class="fas fa-paper-plane"></i>
                    </button>

  </form>

</div>

标签： javascriptjqueryajaxformsrecaptcha

解决方案

如果您调用grecaptcha.execute()表单submit事件处理程序，这应该可以工作，并将 AJAX 调用移动到该onSubmit函数。

表单提交处理程序将阻止实际提交并启动异步 reCAPTCHA。当 reCAPTCHA 响应可用时，它将在表单中插入一个隐藏的输入字段并调用 onSubmit。

function onSubmit(token) {
  //Submit via AJAX
  alert($('#contact-form').serialize());
}

$('form').submit(function(e) {
  event.preventDefault();
  grecaptcha.execute();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<form id="contact-form">
  <input type="text" name="name" required>
  <div id='recaptcha' class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" data-callback="onSubmit" data-size="invisible"></div>
  <button type="submit">Submit</button>
</form>

请注意，由于来源无效，示例在此处嵌入时无法正常工作。

推荐阅读