< p >本文將介紹如何使用 Ajax 通過獲取用戶輸入的值傳遞給后端服務器。通過這種方法，可以實現動態更新和交互功能，讓網站更加靈活和友好。我們將使用一個簡單的例子來說明這個過程，該例子涉及一個輸入框和一個按鈕，當用戶點擊按鈕時，輸入框中的值會被傳遞給后端服務器并進行處理。< /p >
< p >首先，我們需要在 HTML 中創建一個輸入框和一個按鈕，如下所示：< /p >
< pre >< code >

發送
< /code >< /pre >
< p >在 JavaScript 中，我們定義一個名為 sendValue() 的函數，用于獲取輸入框中的值并將其傳遞給后端服務器。代碼如下：< /p >
< pre >< code >
function sendValue() {
var inputValue = document.getElementById("inputValue").value;

// 創建一個 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();

// 設置請求方式和URL
xhr.open("POST", "backend.php", true);

// 設置請求的數據格式
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// 發送請求
xhr.send("value=" + inputValue);

// 監聽請求狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 請求成功后的處理邏輯
console.log(xhr.responseText);
}
}
}
< /code >< /pre >
< p >在以上代碼中，我們首先通過 getElementById() 方法獲取輸入框的值，并將其存儲在變量 inputValue 中。然后，我們創建一個 XMLHttpRequest 對象，用于與后端服務器進行通信。接下來，我們使用 open() 方法設置請求的方式（POST）和 URL（這里假設后端腳本文件為 backend.php）。我們還使用 setRequestHeader() 方法設置請求的數據格式為 application/x-www-form-urlencoded，這是一種通用的編碼格式。最后，我們使用 send() 方法發送請求，將 inputValue 作為參數傳遞給后端服務器。
在 send() 方法執行后，我們通過監聽 XMLHttpRequest 對象的 onreadystatechange 事件來處理請求的狀態變化。當 readyState 的值為 4，表示請求已完成，而 status 的值為 200，表示請求成功。在這種情況下，我們可以通過 responseText 屬性獲取后端服務器返回的響應數據，并在控制臺中打印出來。
總結來說，通過使用 Ajax 獲取用戶輸入的值，并將其傳遞給后端服務器，我們可以實現實時的數據交互和動態更新。這種方法在很多場景下都非常有用，例如搜索框的聯想功能、實時更新的聊天室等。希望本文對你有所幫助，祝你編程愉快！