AJAX（Asynchronous Javascript and XML）是一種用于創(chuàng)建動態(tài)網(wǎng)頁的技術(shù)，通過在不刷新整個頁面的情況下，向服務(wù)器發(fā)送請求并接收并顯示響應(yīng)的數(shù)據(jù)。在網(wǎng)頁中，經(jīng)常需要從表單中獲取用戶輸入的數(shù)據(jù)，以便進行進一步的處理或提交到服務(wù)器。使用AJAX可以輕松地獲取表單中的值，并進行下一步操作。

假設(shè)我們有一個包含姓名，年齡和電子郵件地址的表單。用戶填寫完表單后，我們希望能夠獲取這些值并顯示在頁面上或?qū)⑺鼈儼l(fā)送到服務(wù)器進行處理。

<form id="myForm"><label for="name">姓名：</label><input type="text" id="name" name="name" required><br><label for="age">年齡：</label><input type="number" id="age" name="age" required><br><label for="email">郵箱：</label><input type="email" id="email" name="email" required><br><button type="button" onclick="submitForm()">提交</button></form>

上述代碼展示了一個包含三個輸入字段和一個提交按鈕的簡單表單。當用戶點擊提交按鈕時，我們將調(diào)用一個名為submitForm的函數(shù)。

function submitForm() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var email = document.getElementById("email").value;
// 執(zhí)行下一步操作
}

在submitForm函數(shù)中，我們使用了document.getElementById方法來獲取每個輸入字段的值。該方法將通過元素的id屬性訪問每個輸入字段，并使用value屬性獲取用戶輸入的值。

現(xiàn)在，我們可以對這些值進行任何操作，例如驗證用戶輸入是否滿足要求，或?qū)⑦@些值顯示在頁面上的某個區(qū)域中。

function submitForm() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var email = document.getElementById("email").value;
var displayArea = document.getElementById("displayArea");
displayArea.innerHTML = "姓名：" + name + "<br>年齡：" + age + "<br>郵箱：" + email;
// 執(zhí)行下一步操作
}

在上述代碼中，我們使用document.getElementById方法獲取一個具有id="displayArea"的元素，然后使用innerHTML屬性將用戶輸入的值添加到該元素中，顯示在頁面上。

通過AJAX獲取表單值的優(yōu)勢在于能夠動態(tài)地處理和顯示用戶輸入，而無需刷新整個頁面。這使得用戶體驗更加流暢，同時減輕了服務(wù)器的負擔。

在演示的例子中，我們只獲取了表單中的值并顯示在頁面上。但實際應(yīng)用中，我們可以使用AJAX將這些值發(fā)送到服務(wù)器進行進一步處理，例如將它們存儲在數(shù)據(jù)庫中或發(fā)送電子郵件給管理員等。

AJAX技術(shù)的廣泛應(yīng)用使得用戶互動變得更加便捷和靈活。通過獲取表單的值和使用AJAX來處理和顯示這些值，我們能夠為用戶提供更好的體驗。