AJAX 是一種在前端與后端之間進行異步通信的技術，它能夠實現頁面的局部刷新，提升用戶體驗。其中，使用 AJAX 輸入傳值是一種常見的應用場景。通過 AJAX 輸入傳值，用戶在輸入框中輸入內容后，可以將數據實時傳遞給后端進行處理并返回結果，而無需刷新整個頁面。本文將介紹如何使用 AJAX 輸入傳值，并且通過多個示例進行說明，以幫助讀者更好地理解。

在使用 AJAX 輸入傳值之前，我們首先需要創建一個輸入框和一個用于顯示結果的容器。例如，我們可以創建一個簡單的計算器應用，用戶可以在輸入框中輸入兩個數字，并通過 AJAX 實時傳遞給后端進行計算，并將結果顯示在結果容器中。

<input type="text" id="num1" placeholder="請輸入第一個數字">
<input type="text" id="num2" placeholder="請輸入第二個數字">
<button onclick="calculate()">計算</button>
<div id="result"></div>

在以上示例中，我們創建了兩個輸入框，一個用于輸入第一個數字，另一個用于輸入第二個數字。通過onclick事件，當用戶點擊 "計算" 按鈕時，調用calculate函數。在calculate函數中，使用 AJAX 將用戶輸入的兩個數字傳遞給后端進行計算，并將計算結果顯示在結果容器中。

function calculate() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
document.getElementById("result").innerText = xhr.responseText;
} else {
document.getElementById("result").innerText = "計算失敗";
}
}
};
xhr.open("POST", "/calculate", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({ num1: num1, num2: num2 }));
}

在calculate函數中，首先獲取用戶輸入的兩個數字，并創建一個 XMLHttpRequest 對象。然后，通過open方法指定請求的方法、URL 和是否異步處理。在這個例子中，我們使用 POST 請求方式，并將請求發送到 "/calculate" 路徑。接下來，通過setRequestHeader方法設置請求頭，指定請求體的內容類型為 JSON。最后，通過send方法發送請求，并通過send方法的參數將用戶輸入的兩個數字以 JSON 格式發送給后端。

在后端，我們可以使用任何后端語言來接收并處理這個請求。例如，使用 PHP 的話，我們可以編寫如下代碼：

<?php
$num1 = $_POST["num1"];
$num2 = $_POST["num2"];
$result = $num1 + $num2;
echo $result;
?>

通過接收到的兩個數字進行計算，將結果賦值給變量$result，并通過echo語句輸出結果。這樣，在 AJAX 的回調函數中，可以通過xhr.responseText獲取到后端返回的結果，并將其顯示在結果容器中。如果計算失敗或者請求出現錯誤，可以通過相應的代碼塊進行處理。

除了基本的計算器應用之外，AJAX 輸入傳值還可以用于更多的應用場景。例如，我們可以創建一個搜索建議功能，當用戶在搜索框中輸入關鍵詞時，根據輸入的內容實時顯示相應的搜索建議。通過 AJAX 輸入傳值，可以在用戶輸入的同時向后端發送請求，后端根據用戶輸入的關鍵詞進行搜索，并將搜索結果返回給前端，以實現實時搜索建議的功能。

綜上所述，通過 AJAX 輸入傳值，我們可以實現許多有趣和實用的功能。通過多個示例的說明，我們了解了如何使用 AJAX 輸入傳值，并學會了如何在前端和后端之間進行實時的數據傳遞和交互。希望本文對于讀者有所幫助，并能夠在實際的開發中發揮作用。