在web開發中，我們常常需要通過提交表單來跳轉到另一個頁面。正常情況下，如果不使用ajax，我們需要刷新整個頁面才能跳轉到目標頁面。但是有時候我們希望在不刷新整個頁面的情況下實現提交表單并跳轉頁面的功能。這時，ajax提交就派上了用場。

ajax（Asynchronous JavaScript and XML）是一種在不重新加載整個頁面的情況下，通過與服務器進行少量數據交換來更新部分網頁的技術。通過使用ajax，我們可以在提交表單時，只更新需要變動的部分，而不需要刷新整個頁面。

舉個例子，假設我們正在開發一個購物網站，用戶在瀏覽商品后點擊"加入購物車"按鈕即可將商品添加到購物車中。在傳統的方式下，用戶點擊按鈕后會刷新整個頁面，并跳轉到購物車頁面。但是這樣的交互體驗較差，用戶體驗較差。

使用ajax提交表單則可以改善這個問題。當用戶點擊"加入購物車"按鈕時，我們可以使用ajax將商品id發送給后端服務器，后端服務器接收商品id后將其添加到購物車中。同時，前端頁面只需要更新購物車圖標上的數字，而不需要刷新整個頁面。

$.ajax({
type: "POST",
url: "add_to_cart.php",
data: { productId: 123 },
success: function(response) {
$("#cart-count").text(response.count);
}
});

在上面的例子中，我們使用jQuery的ajax方法發送了一個POST請求到add_to_cart.php文件。我們將商品id作為data參數傳遞給服務器。服務器接收到商品id后，將其添加到購物車中，并返回一個包含購物車中商品數量的響應。在成功回調函數中，我們將響應中的數量更新到購物車圖標的文本中。

使用ajax提交表單還可以避免頁面跳轉造成的用戶輸入數據丟失問題。以一個留言板為例，用戶填寫完留言并點擊提交按鈕后，如果頁面跳轉到另一個頁面，用戶填寫的數據將會丟失。這時候使用ajax提交表單可以解決這個問題。

$.ajax({
type: "POST",
url: "add_comment.php",
data: { message: $("#message").val() },
success: function(response) {
if (response.success) {
$("#message").val("");
$("#comments").append(response.html);
} else {
alert("提交失敗，請稍后再試。");
}
}
});

在上述留言板的例子中，我們使用ajax將留言內容發送給服務器。服務器接收到留言內容后，根據是否成功添加留言返回不同的響應。在成功回調函數中，我們清空留言框的內容，并將新添加的留言追加到留言列表中。在失敗回調函數中，我們彈出一個提示框告訴用戶提交失敗。

總之，ajax提交表單可以在不刷新整個頁面的情況下，實現提交數據并跳轉到目標頁面的功能。它不僅提升了用戶體驗，還避免了用戶輸入數據丟失的問題。通過合理運用ajax技術，我們可以為用戶提供更流暢友好的網頁交互。