javascript - "Not a robot"recaptcha 没有 <form> 而是 AJAX

Question

传统的使用方式"I am not a robot" Recpatcha似乎是一个 <form>在客户端:

<form action="post.php" method="POST">
    <div class="g-recaptcha" data-sitekey="6Lc_0f4SAAAAAF9ZA_d7Dxi9qRbPMMNW-tLSvhe6"></div>
    <button type="submit">Sign in</button>
</form>

<script src='https://www.google.com/recaptcha/api.js'></script>

然后是一些g-recaptcha-response将发送到服务器。

---

但是，在我的代码中我没有使用 <form>而是一个 AJAX 调用:

$('#btn-post').click(function(e) { 
  $.ajax({
    type: "POST",
    url: "post.php",
    data: {
      action: 'post',
      text: $("#text").val(),
      ajaxMode: "true"
    },
    success: function(data) { },
    error: function(data) { } 
  }); } });

如何获取 g-recaptcha-response用这个解决方案回答？

Answer 1

我只是分别在没有使用任何表单和提交机制的情况下实现了它。因此，一个纯 AJAX 解决方案。

HTML代码:

<div id="recaptcha-service" class="g-recaptcha"
 data-callback="recaptchaCallback"
 data-sitekey=""></div>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=en"></script>

JavaScript 代码:

window.recaptchaCallback = undefined;

jQuery(document).ready(function($) {

  window.recaptchaCallback = function recaptchaCallback(response) {
    $.ajax({
      method: "POST",
      url: "http://example.com/service.ajax.php",
      data: { 'g-recaptcha-response': response },
    })
      .done(function(msg) {
        console.log(msg);
      })
      .fail(function(jqXHR, textStatus) {
        console.log(textStatus);
      });
  }

});

重点是使用回调(在本例中为 recaptchaCallback)。

您可以在 https://gist.github.com/martinburger/f9f37770c655c25d5f7b179278815084 找到更完整的示例.该示例在服务器端使用 Google 的 PHP 实现 ( https://github.com/google/recaptcha )。