資料結構
網路
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+ 閱讀量
