在本教程中，我们将使用google ajax将google recaptcha v3添加到php表单中并提交而不离开页面。如果您的网站上有联系表格或任何此类表格，您就会知道从机器人接收垃圾邮件是多么令人讨厌。google recaptcha保护您免受垃圾邮件和其他自动滥用的侵害。要继续学习本教程，您需要具备html，jquery和php的一些基本知识。
为什么选择google recaptcha v3？我们所有人都有令人沮丧的经历，他们试图通过一种形式来快速提交一些信息，而这些形式最终只能面对验证码挑战。我们不得不输入随机字符，然后想知道“是两个v还是w？”，“是否应该添加该空格？”。
然后，我们必须选择所有具有斑马线或桥梁的图像，以证明我们是人类。值得庆幸的是，这些天来，许多网站都添加了google recaptcha v2，它仅显示一个复选框-“我不是机器人”。
但是，在2018年，google发布了下一版本– recaptcha v3，它根本不需要任何用户交互。它在后台工作，观察用户的行为。此版本为我们（开发人员）提供了一个分数，该分数指示了交互的可疑程度。我们可以使用该分数来防止垃圾邮件。在google的官方网站管理员博客上了解其工作原理。
现在让我们学习如何将其添加到简单表单中。
注册recaptcha v3密钥您需要先注册您的网站并在此处获取密钥-https://www.google.com/recaptcha/admin/create。添加标签，选择recaptcha v3，输入您的域名并提交。
这将生成一个“站点密钥”和一个“秘密密钥”。复制两者并确保它们安全。我们将很快需要它们。
html表格让我们使用一个简单的联系表，其中包含全名，电子邮件和消息字段
html为了简化本教程，下面仅显示html代码。对于以上屏幕截图中使用的css，请在本教程末尾下载完整的源代码。
1个
2
3
4
5
6
7
8
9
10
11
<form id=contact-form method=post>
<p class=label>full name *</p>
<input type=text name=name placeholder=full name required>
<p class=label>email *</p>
<input type=email name=email placeholder=email required>
<p class=label>message *</p>
<textarea name=message rows=6 placeholder=type your message here required></textarea>
<!-- a hidden div “alert” below to display the message received from server once form is submitted-->
<div id=alert></div>
<button id=submit-button type=submit>send message</button>
</form>
ajax表单提交在添加recaptcha之前，让我们使用ajax进行表单提交，为此需要jquery库。使用cdn加载它。将此行粘贴到bodyhtml中的结束标记之前。
1个
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js></script>
我们需要在表单提交时提出ajax请求。
1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
$('#contact-form').submit(function(event) {
event.preventdefault(); // prevent direct form submission
$('#alert').text('processing...').fadein(0); // display processing... to let the user know that the form is being submitted
$.ajax({
?url: 'contact.php',
?type: 'post',
?data: $('#contact-form').serialize(),
?datatype: 'json',
?success: function( _response ){
?// the ajax request is a success. _response is a json object
?var error = _response.error;
?var success = _response.success;
?if(error != ) {
// in case of error, display it to user
$('#alert').html(error);
?}
?else {
// in case of success, display it to user and remove the submit button
$('#alert').html(success);
$('#submit-button').remove();
?}
?},
?error: function(jqxhr, json, errorthrown){
?// in case of ajax error too, display the result for demo purpose
?var error = jqxhr.responsetext;
?$('#alert').html(error);
?}
});
});
</script>
使用此代码，如果您单击“提交”，则会显示404错误，因为contact.php尚不存在。接下来，让我们开始。
的php创建contact.php。在服务器端，我们需要验证收到的数据并发送json响应。我们将在一段时间内集成recaptcha。
1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
// server side validation
function isvalid() {
// this is the most basic validation for demo purposes. replace this with your own server side validation
if($_post['name'] != && $_post['email'] != && $_post['message'] != ) {
return true;
} else {
return f