AJAX是一種在網頁上異步發送和接收數據的技術，它不會引起網頁的刷新。而FormData是一種用于在表單中收集鍵值對的對象，可以用于異步上傳文件和提交表單數據。結合使用AJAX和FormData，我們可以實現更加高效和動態的數據提交和處理。

舉個例子，假設我們有一個網頁上的表單，用于提交用戶的個人信息。傳統的方法是當用戶點擊提交按鈕時，網頁會刷新并將表單數據發送到服務器進行處理。這種方式效率低下，用戶體驗差。現在我們可以使用AJAX和FormData來改進這個過程。

$('form').submit(function(e) {
e.preventDefault(); // 阻止表單默認的提交行為
var formData = new FormData(this); // 創建一個FormData對象，將表單數據加入其中
$.ajax({
url: 'handle_form.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
console.log(response);
alert('表單提交成功！');
}
});
});

在上面的例子中，我們使用了jQuery庫來簡化AJAX的操作。首先，通過選擇器選中表單元素，并監聽它的submit事件。然后，通過e.preventDefault()方法阻止表單默認的提交行為，以便我們可以使用AJAX來處理數據。接下來，我們創建一個FormData對象，并將表單數據加入其中。最后，我們使用$.ajax()方法將FormData對象發送到服務器進行處理，并在成功返回時提示用戶。

使用AJAX和FormData的好處是用戶無需等待整個頁面刷新，數據會在后臺進行處理并返回結果，用戶可以繼續瀏覽頁面。在上面的例子中，我們還設置了processData和contentType為false，這樣可以確保表單數據以正確的方式發送到服務器。

另一個例子是使用AJAX和FormData來實現文件上傳功能。假設我們有一個上傳圖片的功能，在傳統的方式中，用戶需要選擇圖片后點擊提交按鈕然后等待頁面刷新。現在我們可以使用AJAX和FormData來實現實時預覽和異步上傳的功能。

$('input[type="file"]').change(function() {
var file = $(this)[0].files[0]; // 獲取用戶選擇的文件
var reader = new FileReader();
reader.onload = function(e) {
$('#preview').attr('src', e.target.result); // 在頁面上顯示預覽圖
}
reader.readAsDataURL(file); // 讀取文件內容
});
$('form').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
console.log(response);
alert('圖片上傳成功！');
}
});
});

在這個例子中，我們監聽了文件選擇框的change事件，當用戶選擇了圖片后，我們使用FileReader對象來讀取文件的內容，并將其顯示在頁面上。當用戶點擊提交按鈕時，我們將圖片的內容和表單數據一起發送到服務器進行處理。

通過使用AJAX和FormData，我們可以實現更加高效和動態的數據提交和處理。這使得網站能夠更加靈活地與用戶交互，并提供更好的用戶體驗。