使用AJAX而不是<form>的“非机器人”recaptcha

Question

传统的使用“我不是机器人”Recaptcha的方式似乎是在客户端使用 <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答案？

- Basj

---

它应该在成功回调函数中的数据变量中。 - HaukurHaf

@HaukurHaf：但是在这里的AJAX调用中，根本没有提到reCAPTCHA。它将如何在成功中出现？ - Basj

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）。

- Martin

---

非常感谢，这对我很有用，而且是一种非常有创意的方式，但我不明白为什么它能工作！？？？ 我做了完全相同的事情，只是没有使用data-callback和相对语句，但它没有起作用，你能解释一下为什么我们应该使用data-callback和...吗？ - TechDogLover OR kiaNasirzadeh

Answer 2

您使用一个表单时，可以中断表单的提交。按照正常设置表单：

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

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

然后你可以使用jQuery打断表单的提交并序列化它，从而使您能够通过Ajax传递数据：

$('#my-form').submit(function(e) {
    e.preventDefault();
    $this = $(this);
    $.ajax({
        type: "POST",
        url: "post.php",
        data: $this.serialize()
    }).done(function(data) {
    }).fail(function( jqXHR, textStatus ) {
        alert( "Request failed: " + textStatus );
    });
});

正如您已经注意到的那样，我使用了.done和.fail代替success和error，这是处理响应的首选方法。

- Styphon

---

那么为了不使用 <form>，我应该使用 <form> 吗？ - Basj

是的。即使您通过Ajax提交表单，仍然需要使用表单，只需中断表单的提交并将其传递给Ajax即可。等一下，我正在我的答案中添加一个示例。 - Styphon

好的。这是黑客行为还是正常操作？哦，是的，我很想看一个示例代码 :) - Basj

$('#myForm').on('submit', function(e) { e.preventDefault(); $.ajax({ ..., data: $(this).serialize(), ... }); } );$('#myForm').on('submit', function(e) { e.preventDefault(); $.ajax({ ..., data: $(this).serialize(), ... }); } ); - Basj

我已经更新了我的答案，是的，这是做事情的标准方式。 - Styphon

这被称为渐进增强。从基本功能开始，然后为那些支持它的人添加扩展功能。如果有人禁用了JS，则验证码仍应该工作，因为它基本上只是回退到正常的、老式的表单 :-) - HaukurHaf

Answer 3

为了完整回答，假如您只想使用链接，您可以...

<form id="g-recap">
  <div class="g-recaptcha" data-sitekey="{{ gcaptcha key }}" ></div>
</form>
<a href="/recaptchaured/path">Verify</a>

$('a').on('click',function(e) {
   e.preventDefault();
   document.location =  $(this).attr('href') + '?' + $('#g-recap').serialize()
});

- zak