在Web開發(fā)中，經(jīng)常會遇到獲取用戶輸入文本框內(nèi)容的需求。為了提升用戶體驗和減少頁面的刷新，我們可以使用AJAX技術(shù)來獲取文本框的內(nèi)容，而無需重新加載整個頁面。本文將介紹如何使用AJAX來獲取網(wǎng)頁輸入文本框內(nèi)容，并通過舉例說明其實際應(yīng)用。

首先，讓我們看一個簡單的例子。假設(shè)我們有一個網(wǎng)頁上有一個輸入文本框和一個按鈕，當(dāng)用戶在文本框中輸入內(nèi)容后，點擊按鈕，我們希望能夠獲取到用戶輸入的內(nèi)容并進(jìn)行一些處理。

<input type="text" id="inputBox" />
<button onclick="getData()">獲取數(shù)據(jù)</button>

function getData() {
var inputText = document.getElementById("inputBox").value;
// 處理獲取到的數(shù)據(jù)...
}

在上面的示例中，我們使用了JavaScript代碼來獲取文本框的內(nèi)容。當(dāng)按鈕被點擊時，getData()函數(shù)會被觸發(fā)，然后通過getElementById()方法獲取到id為inputBox的文本框，并使用value屬性獲取其值。

接下來，我們可以根據(jù)獲取到的數(shù)據(jù)進(jìn)行一些處理，例如將其顯示在頁面上的某個元素中，或者發(fā)送給服務(wù)器進(jìn)行進(jìn)一步處理。

function getData() {
var inputText = document.getElementById("inputBox").value;
// 發(fā)送AJAX請求將inputText發(fā)送給服務(wù)器
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/submit", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理服務(wù)器返回的數(shù)據(jù)...
}
};
xhr.send(JSON.stringify({text: inputText}));
}

上面的代碼演示了如何使用AJAX將獲取到的數(shù)據(jù)發(fā)送給服務(wù)器。我們創(chuàng)建了一個XMLHttpRequest對象，并使用open()方法指定請求類型和URL。然后，我們設(shè)置了請求頭的Content-Type為application/json，表示將數(shù)據(jù)以JSON格式發(fā)送給服務(wù)器。通過onreadystatechange事件監(jiān)聽服務(wù)器的響應(yīng)，并在狀態(tài)碼為200時進(jìn)行處理。最后，我們使用send()方法發(fā)送請求，將獲取到的數(shù)據(jù)以JSON格式發(fā)送給服務(wù)器。

除了發(fā)送數(shù)據(jù)給服務(wù)器，我們還可以將獲取到的數(shù)據(jù)顯示在頁面上的某個元素中。例如，我們可以創(chuàng)建一個

function getData() {
var inputText = document.getElementById("inputBox").value;
// 將inputText顯示在頁面上
var displayElement = document.createElement("div");
displayElement.innerHTML = inputText;
document.body.appendChild(displayElement);
}