AJAX（Asynchronous JavaScript and XML）是一種用于在后臺與服務器進行數據交互的技術。在Web開發中，我們經常需要將表單數據發送到服務器進行處理，而傳統的HTML表單提交方式會刷新整個頁面，不符合用戶體驗的要求。這時，使用AJAX和FormData對象可以實現無刷新提交表單數據的效果，提升用戶交互性。
FormData是一個用于創建表單數據的原生JavaScript對象，可以通過AJAX發送給服務器。它可以自動將表單中的數據轉化為鍵值對的形式，就像HTML表單一樣。FormData對象可以直接通過關聯表單元素的name屬性來獲取元素的值，并將其以鍵值對的形式存儲在FormData對象中。
// 創建一個FormData對象
var formData = new FormData();
// 關聯表單元素的值
formData.append('username', 'Tom');
formData.append('password', '123456');通過以上代碼，我們創建了一個FormData對象formData，并調用了append()方法分別將用戶名和密碼以鍵值對的形式關聯到formData對象中。這樣，我們就可以通過AJAX將formData對象發送給服務器。
相比傳統的表單提交方式，使用FormData對象發送數據具有以下優勢：
1. 可以通過AJAX實現無刷新提交，提升用戶體驗。
2. 可以發送包含圖片、文件等二進制數據的表單。
3. 自動關聯表單元素的name屬性，無需手動處理表單數據。
下面我們來看一個完整的例子，實現通過AJAX無刷新提交表單數據：
<!DOCTYPE html>
<html>
<head>
<script>
function submitForm() {
// 創建一個FormData對象
var formData = new FormData();
// 獲取表單元素的值并關聯到formData對象中
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
formData.append('username', username);
formData.append('password', password);
// 創建一個AJAX請求對象
var xhr = new XMLHttpRequest();
// 監聽AJAX請求的狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert(xhr.responseText);
}
};
// 發送AJAX請求
xhr.open('POST', 'http://example.com/api/login');
xhr.send(formData);
}
</script>
</head>
<body>
<form>
<label>用戶名: <input type="text" id="username" name="username"></label>
<label>密碼: <input type="password" id="password" name="password"></label>
<button type="button" onclick="submitForm()">提交</button>
</form>
</body>
</html>在上述代碼中，我們使用了一個button元素和onclick事件來觸發提交表單的函數submitForm()。點擊提交按鈕時，JavaScript代碼會獲取表單元素的值，并將其關聯到FormData對象formData中，然后使用XMLHttpRequest對象執行POST請求，并將formData對象作為請求參數發送給服務器。
以上是關于使用ajax原生formData進行表單提交的簡單說明。通過使用formData對象，我們可以通過AJAX實現無刷新提交表單數據，并提升用戶體驗。而且，formData對象還可以處理包含圖片和文件等二進制數據的表單。使用原生的AJAX和formData對象，可以更加靈活地處理表單數據，滿足不同的開發需求。