在Web開發中，表單的提交是一項非常重要的功能。一般情況下，我們提交表單后需要等待服務器的響應，刷新整個頁面。然而，通過使用Ajax技術，我們可以實現無需刷新頁面的表單提交，這大大提升了用戶體驗。本文將介紹如何使用Ajax實現多次提交表單的功能，并通過舉例說明其作用。

在傳統的表單提交中，用戶填寫完表單后，點擊提交按鈕，會將表單數據發送給服務器，并等待服務器的響應。這期間，用戶無法進行任何其他操作，需要等到頁面刷新之后才能繼續操作。然而，通過使用Ajax技術，我們可以將表單數據異步發送給服務器，頁面可以繼續響應其他用戶操作，無需等待服務器的響應。

舉個例子，假設我們有一個評論功能，用戶可以在頁面上填寫評論并點擊提交按鈕。傳統的表單提交方式會導致頁面刷新，用戶需要重新滾動到評論區域才能看到自己的評論。而通過使用Ajax，用戶填寫完評論后，可以繼續瀏覽頁面，評論會自動異步發送給服務器并顯示在頁面上，無需刷新整個頁面。

$("#comment-form").submit(function(event) {
event.preventDefault(); // 阻止表單默認提交行為
var formData = $(this).serialize(); // 獲取表單數據
$.ajax({
url: "/comment",
type: "POST",
data: formData,
success: function(response) {
$("#comment-list").append(response); // 將評論追加到評論列表中
$("#comment-form")[0].reset(); // 重置表單
}
});
});

在上述例子中，我們使用了jQuery庫的Ajax方法來發送表單數據給服務器。首先，通過阻止表單的默認提交行為，我們避免了頁面刷新。然后，使用serialize方法獲取到表單數據，并通過Ajax發送給服務器。當服務器返回成功響應時，我們將評論追加到頁面上的評論列表中，并重置表單，以便用戶繼續填寫新的評論。

除了在評論功能中的應用，Ajax多次提交表單功能還可以用在其他很多場景中。比如，在在線購物網站中，用戶可以將多個商品加入購物車，然后點擊結算按鈕。傳統的方式會導致頁面跳轉到支付頁面，而通過使用Ajax，我們可以實現類似添加商品到購物車的異步操作，用戶可以繼續瀏覽頁面，無需等待支付頁面的加載。

$(".add-to-cart-button").click(function() {
var productId = $(this).data("product-id"); // 獲取商品ID
$.ajax({
url: "/cart/add",
type: "POST",
data: { productId: productId }, // 發送商品ID給服務器
success: function(response) {
// 更新購物車圖標上的數字
$(".cart-icon").text(response.cartCount);
}
});
});

在以上例子中，我們使用了jQuery的Ajax方法來將商品ID異步發送給服務器。當服務器返回成功響應時，我們更新購物車圖標上的數字顯示，以反映購物車中的商品數量變化。用戶可以繼續操作頁面，無需等待更新完成。

總結來說，通過使用Ajax技術，我們可以實現無需刷新頁面的多次提交表單功能。這大大提升了用戶體驗，減少了等待時間，使用戶可以更流暢地操作頁面。無論是在評論功能還是購物車功能中，Ajax多次提交表單都可以幫助我們實現更好的交互效果。