javascript 没有 <form> 而是 AJAX 的“不是机器人”recaptcha
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30647113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"Not a robot" recaptcha without a <form> but AJAX instead
提问by Basj
The traditional way of using "I am not a robot" Recpatchaseems to be with a <form>on client-side:
使用“我不是机器人”的传统方式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>
Then some g-recaptcha-responsewill be sent to server.
然后一些g-recaptcha-response将被发送到服务器。
However, in my code I don't use a <form>but an AJAX call instead:
但是，在我的代码中，我不使用 a<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) { }
}); } });
How to get the g-recaptcha-responseanswer with this solution?
如何g-recaptcha-response使用此解决方案获得答案？
采纳答案by Styphon
You use a form, interrupt the submissions of the form. Set up a form as per normal:
你使用一个表单，中断表单的提交。按照常规设置表单：
<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>
And then you use jQuery to interrupt the submission of the form and serialize it, allowing you to pass the data through Ajax:
然后你使用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 );
});
});
As you will have noticed I've used .doneand .failinstead of successand error, this is the preferred way of handling the response.
回答by Martin
I just implemented it without using any form and submit mechanism, respectively. Thus, a pure AJAX solution.
我只是在没有使用任何表单和提交机制的情况下分别实现了它。因此，纯 AJAX 解决方案。
HTML code:
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 code:
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);
});
}
});
The point is using a callback (recaptchaCallbackin this case).
重点是使用回调（recaptchaCallback在这种情况下）。
You can find a more complete example at https://gist.github.com/martinburger/f9f37770c655c25d5f7b179278815084. That example uses Google's PHP implementation on the server side (https://github.com/google/recaptcha).
您可以在https://gist.github.com/martinburger/f9f37770c655c25d5f7b179278815084找到更完整的示例。该示例在服务器端使用 Google 的 PHP 实现 ( https://github.com/google/recaptcha)。
回答by zak
For answer completeness, say you wanted to just use a link you could...
为了答案的完整性，假设您只想使用一个链接，您可以...
<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()
});
