Ajax（Asynchronous JavaScript and XML）是一種在Web應用程序中使用的技術，可以在后臺與服務器進行數據交互，實現頁面內容的無刷新更新。在表單提交并修改數據的場景中，使用Ajax可以改變數據的格式，并且在不刷新整個頁面的情況下更新部分內容，提升了用戶的體驗。

假設我們有一個電商網站，用戶可以在商品詳情頁面對購物車中的商品數量進行修改。以傳統的方式，用戶修改完數量后，需要點擊“提交”按鈕，整個頁面將會重新加載，這樣會造成用戶的不便。而使用Ajax，我們可以通過將表單相關的數據通過異步請求發送給服務器，并獲取到服務器返回的新的購物車信息，然后使用JavaScript將新的購物車信息更新到頁面的指定位置。這樣一來，用戶就可以在不刷新整個頁面的情況下，快速修改商品數量并查看最新的購物車信息。

下面我們來看一個具體的示例。首先，創建一個表單以便用戶可以輸入修改的數據：

<form id="myForm" action="updateCart.php" method="post">
<label for="quantity">數量:</label>
<input type="number" id="quantity" name="quantity" min="1" value="1">
<input type="hidden" name="productId" value="123">
<button type="submit" id="submitBtn">提交</button>
</form>

在上面的代碼中，我們通過input標簽獲取用戶輸入的數量，并通過hidden input標簽將商品ID隱藏在表單中。當用戶點擊提交按鈕時，表單會將相關的數據發送給服務器。

接下來，使用Ajax來監聽表單的提交事件，并將表單數據發送給服務器：

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var formData = new FormData(this); // 創建一個 FormData 對象，用于將表單數據進行封裝
var xhr = new XMLHttpRequest(); // 創建一個 XMLHttpRequest 對象
xhr.open('POST', this.action, true); // 設置請求類型為 POST，請求路徑為表單的 action 屬性值
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); // 設置請求頭，告訴服務器這是一個 AJAX 請求
xhr.onload = function() {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText); // 將服務器返回的響應數據解析為一個 JavaScript 對象
if (response.success) {
// 更新頁面上相關的元素
} else {
// 處理修改失敗的情況
}
} else {
// 處理請求失敗的情況
}
};
xhr.send(formData); // 發送請求
});

在上面的代碼中，我們使用addEventListener方法來綁定submit事件的監聽器，當表單提交時，這個監聽器會被觸發。函數內部，我們使用FormData對象來創建一個用于封裝表單數據的對象。然后創建一個XMLHttpRequest對象，設置其請求類型為POST，請求路徑為表單的action屬性值，并設置請求頭告訴服務器這是一個AJAX請求。這樣就完成了對表單數據的封裝和請求的設置。

當服務器返回響應后，我們根據響應的狀態碼進行相應的處理。如果響應的狀態碼是200，說明服務器處理成功，我們可以將響應的JSON數據解析為一個JavaScript對象，然后根據這個對象的內容來更新頁面上的相關元素。如果修改失敗，我們可以根據服務器返回的錯誤信息來進行處理。若請求失敗，我們也可以進行相應的處理，例如給用戶提示請求失敗的消息。

總結來說，使用Ajax提交表單來修改數據格式可以避免整個頁面的重新加載，提高用戶的操作體驗。通過監聽表單的提交事件，將表單數據封裝為FormData對象，并使用XMLHttpRequest對象發送異步請求，服務器處理完成后返回新的數據，并由JavaScript在不刷新頁面的情況下更新頁面內容。這種方式使得修改數據的流程變得更加快速和順暢。