在現代的網頁開發中，使用Ajax技術進行動態網頁加載已經成為常見的做法。Ajax能夠讓網頁在不刷新的情況下向服務器發送請求，獲取數據，并將數據動態顯示在網頁上。本文將重點介紹如何通過Ajax獲取HTML頁面的值，包括表單輸入框的值、選項框的選中值以及其他的DOM元素的值。通過這種方式，我們可以實現網頁與服務器之間的交互，在用戶填寫完表單后，通過Ajax將數據發送給服務器進行處理，然后再將處理結果反饋給用戶。
舉個例子來說明如何通過Ajax獲取表單輸入框的值。假設我們有一個包含用戶名和密碼的登錄表單，用戶在表單中輸入完用戶名和密碼后，點擊登錄按鈕。此時，我們可以使用Ajax來獲取用戶名和密碼的值，并將其發送給服務器進行驗證，驗證通過后再反饋給用戶登錄成功的提示。
在HTML頁面中，我們需要準備一個表單并使用id屬性來標識該表單。例如：

html
<form id="login-form">
<input type="text" id="username" name="username" placeholder="用戶名">
<input type="password" id="password" name="password" placeholder="密碼">
<button type="button" onclick="submitForm()">登錄</button>
</form>

接下來，在JavaScript代碼中使用Ajax技術獲取表單輸入框的值，并發送給服務器進行驗證。我們可以使用JavaScript提供的XMLHttpRequest對象來實現Ajax請求。下面是一個簡單的實現示例：

javascript
function submitForm() {
var form = document.getElementById("login-form");
var username = form.querySelector("#username").value;
var password = form.querySelector("#password").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/login", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
// 處理服務器返回的結果
alert(response);
}
};
xhr.send("username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
}

在上面的代碼中，我們首先通過getElementById方法獲取表單元素，并使用querySelector方法獲取用戶名和密碼輸入框的值。然后，使用XMLHttpRequest對象發送POST請求給服務器，并將用戶名和密碼作為請求參數。當服務器返回響應時，我們可以在onreadystatechange事件的回調函數中獲取服務器返回的結果，并做進一步的處理，例如彈出提示框提示用戶登錄成功或失敗。
通過以上的例子，我們可以看到如何通過Ajax獲取表單輸入框的值，并將其發送給服務器進行處理。類似地，我們也可以通過Ajax獲取其他DOM元素的值，例如選項框的選中值、復選框的選中狀態等。只需要根據具體的HTML結構和需求，使用JavaScript代碼獲取相應的DOM元素的值，并在Ajax請求中傳遞給服務器即可。
總結起來，通過Ajax獲取HTML頁面的值是一種很常見且實用的做法。它能夠實現網頁與服務器之間的高效交互，提供更好的用戶體驗。無論是獲取表單輸入框的值還是其他DOM元素的值，我們都可以利用JavaScript提供的XMLHttpRequest對象來發送Ajax請求，并在請求中攜帶相應的值。通過這種方式，我們可以實現各種復雜的網頁交互功能，提升用戶體驗，并滿足不同的業務需求。