當使用Ajax提交表單時，我們通常會希望在提交成功后更新導航欄，以提供用戶有關提交的信息。通過Ajax，我們可以在不刷新整個頁面的情況下，通過異步請求將數據發送到服務器并接收響應。本文將介紹如何使用Ajax來實現提交后導航欄顯示信息的功能，并通過舉例說明，幫助讀者更好地理解。
在我們使用Ajax提交表單后，可以通過以下步驟來更新導航欄的信息：
1. 通過Javascript獲取表單的數據并將其轉換為JSON格式。
2. 使用Ajax向服務器發送請求，將表單數據作為參數傳遞給服務器端腳本。
3. 服務器端腳本處理接收到的數據，并返回處理結果。
4. 在Ajax回調函數中，根據服務器端返回的結果更新導航欄的信息。
以下是一個例子，假設我們有一個評論表單，用戶可以在其中輸入評論內容并提交。提交后，我們希望在導航欄上顯示最新的評論數量。

html
<form id="comment-form">
<textarea name="comment"></textarea>
<input type="submit" value="提交評論">
</form>
<script>
// 獲取評論表單
const commentForm = document.getElementById('comment-form');
// 監聽表單提交事件
commentForm.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
// 獲取評論內容
const comment = commentForm.querySelector('textarea[name="comment"]').value;
// 將評論數據轉換為JSON格式
const data = JSON.stringify({ comment: comment });
// 發送Ajax請求
const xhr = new XMLHttpRequest();
xhr.open('POST', '/submit-comment', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
updateNavigation(response.newCommentCount); // 更新導航欄的信息
}
};
xhr.send(data);
});
// 更新導航欄的信息
function updateNavigation(newCommentCount) {
const navigation = document.getElementById('navigation');
navigation.textContent =評論 (${newCommentCount});
}
</script>

在上面的示例中，我們首先獲取了評論表單的DOM元素，并監聽了表單的提交事件。當用戶點擊提交按鈕時，我們阻止了表單的默認提交行為，并獲取了用戶輸入的評論內容。然后，我們使用XMLHttpRequest對象創建了一個Ajax請求，并將評論數據作為參數傳遞給服務器端腳本。在服務器端腳本中，我們可以處理接收到的評論數據，并返回處理結果，比如最新的評論數量。在Ajax的回調函數中，我們解析服務器端返回的結果，并根據最新的評論數量來更新導航欄的信息。
通過這種方式，我們可以實現在不刷新整個頁面的情況下，通過Ajax提交表單后更新導航欄的信息。這種實時性的更新可以提供更好的用戶體驗，使用戶能夠及時了解到其操作的結果。當然，上面的示例僅僅是一個簡單的例子，實際應用中可能還涉及到更復雜的業務邏輯和交互需求。但是，通過理解以上的原理和示例，讀者應該能夠更好地掌握使用Ajax提交后更新導航欄信息的技術。