英文 | https://www.digitalocean.com/community/tutorials/submitting-ajax-forms-with-jquery
翻译 | 杨小爱
介绍
jQuery 可以与表单提交配对来处理验证。这有利于向用户提供有关其输入中的任何错误的反馈。
在本教程中，我们将看到一个与 PHP 后端通信的示例表单。表单将使用 jQuery 来处理没有页面刷新的表单（使用 AJAX），指示任何错误，并显示成功消息。
准备工作
要完成本内容，我们需要做如下准备：
- 在本地电脑上安装PHP，并且能够运行内置的 Web 服务器。
- 熟悉 jQuery 库中的选择器和方法。
- 熟悉 Bootstrap 库中的类。
- 一个代码编辑器。
- 现代网络浏览器。
注意：本教程不指定最新版本的 jQuery（当前为 3.5.1）或 Bootstrap（当前为 5.0.0-beta1）。但是，本教程中的许多课程仍然适用于最新版本。
本教程已使用 PHP v7.3.24、jQuery v2.0.3 和 Bootstrap v3.0.3 进行了验证。
第 1 步 — 使用 PHP 构建后端
出于本教程的目的，后端将使用 PHP 编写。
首先，打开一个终端窗口并创建一个新的项目目录：
mkdir
jquery-form-validation
导航到这个新的项目目录：
然后，使用代码编辑器创建一个新的 process.php 文件如下：
<?php
$errors = [];
$data = [];
if (empty($_POST['name'])) {
$errors['name'] = 'Name is required.';
}
if (empty($_POST['email'])) {
$errors['email'] = 'Email is required.';
}
if (empty($_POST['superheroAlias'])) {
$errors['superheroAlias'] = 'Superhero alias is required.';
}
if (!empty($errors)) {
$data['success'] = false;
$data['errors'] = $errors;
} else {
$data['success'] = true;
$data['message'] = 'Success!';
}
echo json_encode($data);
此文件将采用 name、email 和 superheroAlias 的值。如果未提供这些值中的任何一个，则会发回一条错误消息。此时可以执行许多其他验证，但就本教程而言，我们只需确保已提供这些必需的输入。否则，如果存在 name、email 和 superheroAlias 的值，则会发回一条成功消息。
注意：在实际场景中，后端还负责其他任务，例如获取数据并将更改保存到数据库、创建会话或发送电子邮件。
现在，我们已经完成了表单处理，我们可以创建表单。
第 2 步 — 使用 HTML 和 CSS 构建前端
出于本教程学习的目的，Bootstrap 将用于构建视图。
在我们的项目目录中，使用代码编辑器创建一个 index.html 文件如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Example</title>
<link
rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<div class="col-sm-6 col-sm-offset-3">
<h1>Processing an AJAX Form</h1>
<form action="process.php" method="POST">
<div id="name-group" class="form-group">
<label for="name">Name</label>
<input
type="text"
class="form-control"
id="name"
name="name"
placeholder="Full Name"
/>
</div>
<div id="email-group" class="form-group">
<label for="email">Email</label>
<input
type="text"
class="form-control"
id="email"
name="email"
placeholder="email@example.com"
/>
</div>
<div id="superhero-group" class="form-group">
<label for="superheroAlias">Superhero Alias</label>
<input
type="text"
class="form-control"
id="superheroAlias"
name="superheroAlias"
placeholder="Ant Man, Wonder Woman, Black Panther, Superman, Black Widow"
/>
</div>
<button type="submit" class="btn btn-success">
Submit
</button>
</form>
</div>
</body>
</html>
将引用 Bootstrap 和 jQuery 的 CDN（内容分发网络）版本。表单action将设置为之前创建的 PHP 文件。该表单将包含姓名、电子邮件和 superheroAlias 字段。该表单还需要一个提交按钮。
打开终端窗口并导航到项目目录。并运行 PHP 服务器：
在 Web 浏览器中访问 localhost:8000 并观察以下内容：
现在，我们已经完成了表单，我们可以创建脚本来处理表单提交。
第 3 步 — 在 JavaScript 和 jQuery 中处理表单提交逻辑
要通过 AJAX 提交表单，我们的脚本将需要处理四个任务：
- 获取表单提交按钮，以便不执行默认操作。
- 使用 jQuery 从表单中获取所有数据。
- 使用 AJAX 提交表单数据。
- 如果有错误，请显示错误。
在我们的项目目录中，使用我们的代码编辑器创建一个新的 form.js 文件：
$(document).ready(function () {
$("form").submit(function (event) {
var formData = {
name: $("#name").val(),
email: $("#email").val(),
superheroAlias: $("#superheroAlias").val(),
};
$.ajax({
type: "POST",
url: "process.php",
data: formData,
dataType: "json",
encode: true,
}).done(function (data) {
console.log(data);
});
event.preventDefault();
});
});此代码从name、email和 superheroAlias 字段中检索数据。然后，它使用表单数据的有效负载对 process.php 执行 AJAX 请求。
成功连接后，控制台将记录响应数据。event.preventDefault() 用于通过在提交时重新加载页面来防止表单默认行为。
保存对 form.js 的更改后，使用代码编辑器重新访问 index.html 文件。添加对新 JavaScript 文件的引用：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Example</title>
<!-- ... -->
<script src="form.js"></script>
</head>
<!-- ... -->
现在，当用户按下表单上的提交按钮时，JavaScript 代码将检索所有输入值并向 process.php 发送一个 POST 请求。
注意：我们将使用 .done 回调来处理成功的 AJAX 请求。这曾经被称为 .success，但后来在 jQuery 1.8+ 中已被弃用。另一种选择是使用serialize而不是单独提取表单信息。
PHP 脚本将处理 AJAX 调用发送的输入并返回创建的 $data[] 数组。提交表单后，我们可以在浏览器的控制台中观察到这一点：
现在，我们已经完成了表单逻辑，我们可以创建脚本来处理表单错误。
第 4 步 - 显示表单验证错误
在 PHP 脚本中，代码检查以确保所有字段都是必需的。如果字段不存在，则会发回错误。
重新访问 form.js ，并添加以下显示的代码行：
// ...
$.ajax({
type: "POST",
url: "process.php",
data: formData,
dataType: "json",
encode: true,
}).done(function (data) {
console.log(data);
if (!data.success) {
if (data.errors.name) {
$("#name-group").addClass("has-error");
$("#name-group").append(
'<div class="help-block">' + data.errors.name + "</div>"
);
}
if (data.errors.email) {
$("#email-group").addClass("has-error");
$("#email-group").append(
'<div class="help-block">' + data.errors.email + "</div>"
);
}
if (data.errors.superheroAlias) {
$("#superhero-group").addClass("has-error");
$("#superhero-group").append(
'<div class="help-block">' + data.errors.superheroAlias + "</div>"
);
}
} else {
$("form").html(
'<div class="alert alert-success">' + data.message + "</div>"
);
}
});
event.preventDefault();
});
// ...
此代码检查响应是否包含每个字段的错误。 如果存在错误，它会添加一个 has-error 类并附加错误消息。
现在，在 Web 浏览器中重新访问我们的表单并尝试使用表单提交数据。
如果服务器返回任何错误，表单将提供有关任何必填字段的反馈：
如果服务器没有返回错误，表单将给一个成功提交的成功反馈：
每次我们提交表单时，我们之前提交的错误仍然存在。 再次提交表单后，我们需要通过删除它们来清除它们。
重新访问 form.js ，并添加以下显示的代码行：
// ...
$("form").submit(function (event) {
$(".form-group").removeClass("has-error");
$(".help-block").remove();
// ...
});
// ...
此代码将从所有 .form-group 元素中删除 has-error 类。 它还将删除所有带有错误消息的 .help-block 元素。
第 5 步 — 显示服务器连接错误
如果连接到服务器时出错，AJAX 调用将没有 JSON 响应。 为了防止用户等待永远不会到达的响应，我们可以提供连接失败的错误消息。
重新访问 form.js， 并添加以下显示的代码行：
// ...
$.ajax({
type: "POST",
url: "process.php",
data: formData,
dataType: "json",
encode: true,
})
.done(function(data) {
// ...
})
.fail(function (data) {
$("form").html(
'<div class="alert alert-danger">Could not reach server, please try again later.</div>'
);
});
// ...
如果服务器因任何原因发生故障或停机，尝试提交表单的用户将收到错误消息：
现在，我们已经完成了服务器错误消息，已经完成了示例表单。
使用 $.post 而不是 $.ajax
jQuery 还提供了一个 $.post 速记方法作为 $.ajax 的替代方法。
form.js 中的 $.ajax 代码可以用 $.post 重写：
$.post('process.php', function(formData) {
// place success code here
})
.fail(function(data) {
// place error code here
});$.post 的优点是，它不需要声明那么多的连接配置。
总结
在本文中，我们构建了一个示例表单，该表单使用 jQuery 与 PHP 后端通信并显示表单中的任何错误。
作为下一步，我们将需要探索更复杂的验证，例如有效的电子邮件地址和日期。 我们可能还对应用在浏览器中工作的客户端验证感兴趣。
如果还想了解有关 JavaScript 的更多内容，请查看我们的图文教程中 JavaScript 相关内容进行学习与阅读。
今天内容就到这里，感谢您的阅读。
学习更多技能
请点击下方公众号
