AJAX（Asynchronous JavaScript and XML）是一種在Web開發中常用的技術，可以實現網頁異步更新和交互，提升用戶體驗。在表單提交中，通常會通過AJAX來實現數據的提交和修改。本文將討論如何通過AJAX提交和修改表單數據的格式，以及一些常用的技巧和注意事項。

在AJAX中，我們可以通過XMLHttpRequest對象來創建HTTP請求，并發送到服務器獲取數據或提交表單。當我們需要修改表單數據的格式時，可以通過修改請求的頭部或使用JSON來實現。

對于修改表單數據格式的場景，一個常見的示例是將表單數據轉為JSON格式。假設我們有一個簡單的登錄表單，包括用戶名和密碼：

<form id="loginForm">
<input type="text" name="username" placeholder="用戶名">
<input type="password" name="password" placeholder="密碼">
<button type="submit">登錄</button>
</form>

我們可以使用JavaScript獲取表單數據，將其轉為JSON格式，并通過AJAX提交到服務器：

<script>
function submitForm() {
var form = document.getElementById('loginForm');
var formData = new FormData(form);
var jsonData = {};
formData.forEach(function(value, key){
jsonData[key] = value;
});
var xhr = new XMLHttpRequest();
xhr.open('POST', '/login');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理服務器返回的數據
}
};
xhr.send(JSON.stringify(jsonData));
}
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單默認提交
submitForm();
});
</script>

在上述代碼中，我們首先獲取了表單元素及其對應的數據，并將其轉為JSON對象。然后，我們創建了一個XMLHttpRequest對象，并設置請求的方法、URL和消息頭部。最后，我們通過調用send方法將轉換后的JSON數據發送到服務器。

除了修改請求頭部以外，還有一種常見的方式是修改請求的Content-Type。例如，在上傳文件時，常常需要將表單數據轉為multipart/form-data格式。示例如下：

<form id="uploadForm">
<input type="file" name="file">
<button type="submit">上傳</button>
</form>

<script>
function submitForm() {
var form = document.getElementById('uploadForm');
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理服務器返回的數據
}
};
xhr.send(formData);
}
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單默認提交
submitForm();
});
</script>

在上述代碼中，我們通過FormData對象獲取表單數據，并創建了一個XMLHttpRequest對象。在設置消息頭部時，我們將Content-Type設置為multipart/form-data，以滿足上傳文件的需求。最后，我們通過調用send方法將FormData對象發送到服務器。

總結而言，通過AJAX提交和修改表單數據的格式，我們可以靈活地使用XMLHttpRequest對象，并結合設置請求頭部或使用特定格式來滿足不同的需求。無論是將表單數據轉為JSON格式還是上傳文件，我們都可以通過適當的代碼調整來滿足實際的業務需求。