在現代web開發中，Ajax成為了不可或缺的一部分。通過Ajax技術，我們可以在不刷新整個頁面的情況下和服務器進行數據交互。而form表單是常用的數據收集和提交方式，在這篇文章中，我們來介紹一下如何使用javascript的Ajax技術提交form表單。

首先，我們需要先了解一下form表單提交的方式。常見的有兩種：GET和POST。GET方式會將表單數據拼接在url后面作為參數傳遞，而POST則會將數據包含在請求體中。POST方式相比GET更為安全，且可以上傳大量的數據。

// GET方式提交

// POST方式提交

使用Ajax技術提交form表單的過程可以分為以下幾個步驟：

1. 阻止表單的默認提交行為

document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
// 阻止默認提交行為
});

2. 獲取表單數據

var form = document.querySelector('form');
var formData = new FormData(form);
// FormData對象可以自動獲取表單中的所有數據

3. 使用XMLHttpRequest對象發送請求

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/form.php');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 請求成功
} else {
// 請求失敗
}
}
};
xhr.send(formData);

完整的代碼如下：

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/form.php');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 請求成功
} else {
// 請求失敗
}
}
};
xhr.send(formData);
});

這段代碼將會在表單提交時發送一個POST請求到服務器，請求體中包含了表單中的所有數據。在服務器端，我們可以使用相應的后端框架來處理這些數據。

需要注意的是，由于Ajax請求是異步的，我們需要在成功接收到響應后才能進行下一步操作。想要在表單提交后立即進行頁面跳轉等操作，需要在請求過程中添加必要的判斷。

總結一下，使用Ajax技術提交form表單相對于常規提交方式，有更好的用戶體驗和數據安全性。在實際開發中，我們應該合理使用這些技術，為用戶帶來更好的體驗。