如何在提交表单后执行 jQuery 回调?
如今，几乎每个网站都至少包含一个表单，例如联系表单、申请表单等等。当表单提交成功或出现错误时，也需要通知用户，以便用户可以再次采取操作。
在 jQuery 中，我们可以使用 `submit()` 方法在提交表单后调用回调函数。此外，我们还可以在回调函数中将表单数据保存到数据库。因此，在提交表单后，有很多场景需要调用回调函数来执行特定操作。
语法
用户可以按照以下语法在 jQuery 中调用表单提交后的回调函数。
$("#form_id").submit(function (event) {
event.preventDefault();
// 回调函数的代码
});
在上面的语法中，我们使用 jQuery 访问了表单，并执行了表单的 submit() 方法。此外，我们将回调函数作为 submit() 方法的参数传递。
让我们通过不同的示例学习如何在 jQuery 中使用回调函数和 submit() 方法。
示例 1(基本表单提交回调)
在下面的示例中，我们演示了 jQuery 中的基本提交回调。这里，我们创建了一个用于接收食物输入数据的表单，表单 ID 为 'test_form'。
在 jQuery 中，我们使用表单 ID 访问了表单，并执行了 submit() 方法。此外，我们将匿名回调函数作为 submit() 方法的参数传递。在回调函数中，我们将"表单提交成功"的消息添加到网页。
用户可以输入数据并单击提交按钮来提交表单。之后，他们将在网页上看到一条消息。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>
</head>
<body>
<h3> Calling the <i> JQuery's callback function </i> after submitting the form </h3>
<form id = "test_form">
<input type = "text" name = "food_name" placeholder = "Enter food name" />
<input type = "text" name = "food_type" placeholder = "Enter food type" />
<input type = "text" name = "food_price" placeholder = "Enter food price" />
<input type = "submit" value = "Submit" />
</form> <br>
<div id = "result"> </div>
<script>
$(document).ready(function () {
// 表单提交后，将调用回调函数。
$("#test_form").submit(function (event) {
event.preventDefault();
$("#result").html("Form submitted successfully");
});
});
</script>
</body>
</html>
示例 2(使用 AJAX 进行异步表单提交)
在下面的示例中，我们演示了异步表单提交。我们创建了一个表单来获取博客文章数据。我们从用户那里获取文章标题、文章正文、作者和文章发布日期。
当用户点击提交按钮时，它将执行 submit() 方法的回调函数。在回调函数中，我们使用 'fetch' API 向 https://dummyjson.com/posts/add URL 发送一个 'POST' 请求。
我们将 URL 作为 fetch() 方法的第一个参数传递，并将包含方法、标头和正文的对象作为第二个参数传递。此外，我们还在网页上打印了响应。
在输出中，用户可以在表单中输入文章数据，然后点击提交按钮来查看响应。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>
</head>
<body>
<h3> Calling <i> jQuery's callback function </i> after submitting the form </h3>
<form id = "post_form">
<input type = "text" name = "post_title" id = "post_title" placeholder = "Post Title" /><br> <br>
<input type = "text" name = "post_body" id = "post_body" placeholder = "Post Body" /> <br> <br>
<input type = "text" name = "author" id = "author" placeholder = "Author" /> <br> <br>
<input type = "date" name = "schedule_date" id = "schedule_date" placeholder = "Schedule Date" /> <br> <br>
<input type = "submit" value = "Submit" />
</form> <br>
<div id = "result"> </div>
<script>
$(document).ready(function () {
$("#post_form").submit(function (event) {
event.preventDefault();
fetch('https://dummyjson.com/posts/add', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title: $('#post_title').val(),
body: $('#post_body').val(),
author: $('#author').val(),
scheduleDate: $('#schedule_date').val(),
userId: 5,
})
})
.then(res => res.json())
.then(data => {
// Display response data in the 'result' div
$('#result').text(JSON.stringify(data, null, 2));
});
});
});
</script>
</body>
</html>
示例 3(表单提交时进行验证)
在下面的示例中，我们演示了如何在表单提交时调用回调函数来验证表单。此表单用于接收打印机数据。
在 jQuery 中，如果任何输入值为空，我们会显示验证消息。此外，如果打印机的价格低于 10000，我们也会相应地显示验证消息。
在输出中，用户可以在输入字段中输入低于 10000 的价格，然后单击提交按钮来查看验证消息。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>
</head>
<body>
<h3> Calling <i> jQuery's callback function </i> after submitting the form </h3>
<form id = "printer_form">
<lable for = "printer"> Printer </lable>
<input type = "text" id = "printer" name = "printer" placeholder = "Printer"> <br> <br>
<lable for = "price"> Price </lable>
<input type = "number" id = "price" name = "price" placeholder = "Price"> <br> <br>
<input type = "submit" value = "Submit" />
</form> <br>
<div id = "result"> </div>
<script>
$(document).ready(function () {
$("#printer_form").submit(function (event) {
event.preventDefault();
if ($("#printer").val() == "" || $("#price").val() == "") {
$('#result').html("Please fill all the fields");
} else if ($("#price").val() < 10000) {
$('#result').html("Price is very low");
} else {
$('#result').html("Form submitted successfully");
}
});
});
</script>
</body>
</html>
结论
我们学习了如何在 jQuery 中表单提交后执行回调函数。如果使用提交输入框，我们可以使用 jQuery 的 `submit()` 方法来执行回调函数。如果使用普通按钮提交表单，我们可以在用户点击按钮时调用该函数。
此外，我们还学习了表单提交后调用回调函数的不同用例。在第一个示例中，我们执行回调函数来通知用户表单已提交。在第二个示例中，我们将数据发布到特定 URL;在第三个示例中，我们使用回调函数进行表单验证。
