AJAX是一種異步的JavaScript和XML技術(shù)，它可以實(shí)現(xiàn)頁面的局部刷新，從而提高用戶的交互體驗(yàn)。在表單提交過程中，我們可以使用AJAX來獲取表單的全部數(shù)據(jù)，并通過異步請(qǐng)求將數(shù)據(jù)發(fā)送到服務(wù)器。這樣一來，用戶在填寫表單時(shí)不需要等待整個(gè)頁面刷新，只需要等待服務(wù)器響應(yīng)即可。下面是一個(gè)簡(jiǎn)單的例子：
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="email" name="email">
<button type="button" onclick="submitForm()">提交</button>
</form>
<script>
function submitForm() {
var form = document.getElementById("myForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "process.php", true);
xhr.send(formData);
}
</script>在上面的例子中，我們首先為表單設(shè)置了一個(gè)ID為"myForm"，然后通過document.getElementById方法獲取到表單的DOM對(duì)象。接下來，我們使用FormData對(duì)象來存儲(chǔ)表單的數(shù)據(jù)。FormData對(duì)象是一種特殊的數(shù)據(jù)類型，能夠自動(dòng)將表單的數(shù)據(jù)轉(zhuǎn)化為鍵值對(duì)的形式，從而方便地進(jìn)行操作。通過new FormData(form)的方式，我們將整個(gè)表單的數(shù)據(jù)存儲(chǔ)在formData變量中。
接下來，我們創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象(xhr)，并通過open方法指定了請(qǐng)求的方式（POST）、請(qǐng)求的URL（"process.php"）以及是否采用異步方式（true）。最后，我們通過send方法將表單的數(shù)據(jù)formData發(fā)送到服務(wù)器。這里我們假設(shè)服務(wù)器端的處理程序?yàn)?process.php"，你可以根據(jù)實(shí)際情況進(jìn)行相應(yīng)的調(diào)整。
除了使用FormData對(duì)象來獲取表單的全部數(shù)據(jù)之外，我們還可以通過遍歷表單元素來逐個(gè)獲取每個(gè)表單項(xiàng)的數(shù)據(jù)。下面是一個(gè)基于jQuery的例子：
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="email" name="email">
<button type="button" onclick="submitForm()">提交</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function submitForm() {
var formData = {};
$("#myForm input").each(function() {
formData[$(this).attr("name")] = $(this).val();
});
$.ajax({
url: "process.php",
type: "POST",
data: formData,
success: function(response) {
// 處理服務(wù)器返回的響應(yīng)數(shù)據(jù)
}
});
}
</script>在上面的例子中，我們首先通過遍歷#myForm input來獲取表單元素，然后使用each方法獲取每個(gè)表單項(xiàng)的name和value，并將其存儲(chǔ)在formData對(duì)象中。最后，我們使用$.ajax方法來發(fā)送請(qǐng)求，通過設(shè)置url、type和data等參數(shù)來指定請(qǐng)求的URL、方式和數(shù)據(jù)。在請(qǐng)求成功時(shí)，我們可以通過success回調(diào)函數(shù)來處理服務(wù)器返回的響應(yīng)數(shù)據(jù)。
通過上面的例子，我們可以看到，使用AJAX來獲取表單的全部數(shù)據(jù)非常簡(jiǎn)單。不論是使用原生的JavaScript還是使用第三方庫(kù)，只需要遵循特定的操作步驟，即可快速獲取到表單的數(shù)據(jù)，并將其發(fā)送到服務(wù)器進(jìn)行處理或者展示。通過使用AJAX技術(shù)，我們可以提高用戶的交互體驗(yàn)，減少頁面的刷新，從而實(shí)現(xiàn)更加流暢和友好的用戶界面。