数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何提交表单后执行 jQuery 回调函数？
如今，每个网站都至少包含一个表单，例如联系表单、申请表单等。当表单成功提交或出现错误时，也需要通知用户，以便用户再次采取措施。
在 JQuery 中，我们可以使用 submit() 方法在提交表单后调用回调函数。但是，我们也可以在回调函数中将表单数据保存到数据库中。因此，在许多用例中，我们必须在提交表单后调用回调函数来执行特定的操作。
语法
用户可以按照以下语法在 JQuery 中提交表单后调用回调函数。
$("#form_id").submit(function (event) {
event.preventDefault();
// code for the callback function
});
在上面的语法中，我们使用 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 () {
// Callback function will be called after submitting the form.
$("#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 中提交表单后执行回调函数。如果我们使用 submit 输入，则可以使用 jQuery 中的 submit() 方法来执行回调函数。如果我们使用普通按钮提交表单，则可以在用户单击按钮时调用该函数。
此外，我们还学习了可以在提交表单后调用回调函数的不同用例。在第一个示例中，我们执行了回调函数以通知用户表单提交。在第二个示例中，我们将数据发布到特定 URL；在第三个示例中，我们使用回调函数进行表单验证。
2K+ 阅读量
