reCaptcha隐形、欧芹和ajax格式
<form action="send1.php" method="post" class="contact_form">
<label for="name_1">Name</label>
<input type="text" name="name_1" id="name_1" value="" required />
<div class="g-recaptcha" data-sitekey="XXX"></div>
<input type="submit" class="button" value="">
</form>
$('.contact_form').parsley();
$('.contact_form').submit(function(){
if($('.contact_form').parsley().validate()){
$('.contact_form').ajaxSubmit();
}
return false;
});
<div id='recaptcha' class="g-recaptcha"
data-sitekey="XXX"
data-callback="onSubmit"
data-size="invisible"></div>
</div>
grecaptcha.execute();
有什么需要帮忙的吗？
共有1个答案
我会和你分享我是如何让欧芹和隐形reCaptcha为我工作的。下面是我使用的代码。这只是POC代码，而不是生产；我没有做AJAX帖子。请原谅任何丑陋，因为我不得不剥掉很多绒毛：
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="../node_modules/parsleyjs/dist/parsley.min.js"></script>
</head>
<body>
<form action="#" data-parsley-validate class="js-validate">
<div>
<label for="input-first-name">First Name*</label>
<input
type="text"
id="input-first-name"
name="first-name"
data-parsley-trigger="blur"
data-parsley-error-message="First Name is required"
required>
</div>
<div>
<label for="input-last-name">Last Name*</label>
<input
type="text"
name="last-name"
id="input-last-name"
data-parsley-trigger="blur"
data-parsley-error-message="Last Name is required"
required>
</div>
<div>
<button type="submit" id="theSubmitBtn">Submit</button>
</div>
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script>
<script>
function onScriptLoad() {
var htmlEl = document.querySelector('.g-recaptcha');
var captchaOptions = {
sitekey: 'Your_Site_Key',
size: 'invisible',
callback: function (token) {
$('.js-validate').submit();
console.log('test: ',token);
}
};
recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, false);
$('#theSubmitBtn').click(function(e){
e.preventDefault();
if(grecaptcha.getResponse() != ''){
grecaptcha.reset();
}
grecaptcha.execute();
});
}
</script>
<div id='recaptcha' class="g-recaptcha"></div>
</form>
</body>
</html>
因此，如果希望通过AJAX进行提交，可以添加一个ParsleyJS事件侦听器，并以这种方式进行AJAX调用。
$('.js-validate').parsley().on('form:submit', function() {
//AJAX post here
return false;
});
我的解决方案主要基于这篇文章（所以归功于他）：隐形的谷歌Recaptcha和ajax表单
-
问题内容： 我正在尝试将隐式reCaptcha实施到网站上。但是我无法正常工作。这是我在做什么： 标头 form.php script.js contact.php 如果g-recaptcha-response不为null，则后端（contact.php）可以正常工作。但是我的问题是，当我尝试执行g-recaptcha- response（在var字段和test中）时，它总是空的。当我在表单上显示
-
ReCaptcha需要设置一个“data-callback”，我不知道如何将它与我已经存在的“.submit（function（event）”函数绑定。 我的“onsubmit（）”技巧不起作用，它忽略了“Ajax”并刷新页面。 如何在我的“datas”变量中发送“g-recaptcha-response”值以将其发布到test.php？
-
问题内容： 我正在尝试在AngularJS网络应用程序中实现 不可见的 reCAPTCHA。根据他们的文档，我应该在登录表单的提交按钮上添加一个名为“数据回调”的属性。但是，我使用ng- click将http请求的功能附加到按钮。那我应该在“数据回调”属性的值中输入什么呢？另外，如何知道recaptcha结果是否成功，并获取g- recaptcha-response与我的http请求一起发送到服务
-
在文档中，它假定表单是普通表单，而不是Ajax。到底应该如何将不可见的reCaptcha集成到我的ajax表单中？例如： 特别是，我应该为“数据回调”处理程序指定什么？同样，在文档中，it data-callback提交了一个表单，但是是一个普通的表单，而我的表单是Ajax。我需要“数据回调”吗？我不应该在处理程序中调用recaptcha吗？怎么做？ 有“render”、“getresponse”
-
问题内容： 我设法在我的网站上运行ReCaptcha 2.0。但是，只有当我不使用AJAX并让表单“自然”提交时，它才起作用。 我要提交带有验证码的表单，并在 不刷新页面的情况下 向用户发送成功提示，以提醒用户。 我尝试了以下代码，但似乎服务器未获得用户响应： HTML： JS： PHP： *PHP页面中 *的结果 ： 最重要的 是，如何在不自动处理其余POST数据的情况下手动获得输入响应？ 问题
-
底线是，我如何手动地获得输入响应而不自动地与其余的POST数据一起进行呢？