AJAX (Asynchronous JavaScript and XML) 是一種用于在Web頁面上異步請求服務器端數據的技術。其主要目的是在不刷新整個網頁的情況下，通過與服務器進行數據交互，實現對頁面特定部分的局部刷新。在這篇文章中，我們將討論如何使用AJAX修改input的值。通過使用AJAX，我們可以在用戶輸入數據的同時，實時更新其他相關的輸入框內容，提升用戶體驗和頁面的交互性。 舉個例子來說明這個場景。假設我們正在構建一個在線購物網站，用戶可以在輸入框輸入商品的數量，隨后網站會實時計算所選擇商品的總價并顯示出來。我們可以使用AJAX技術來實現這一功能，避免用戶每次修改商品數量都要手動點擊“計算”按鈕刷新頁面。 首先，我們需要在HTML頁面中創建一個元素，用戶可以在其中輸入商品數量。通過給該輸入框綁定一個onchange事件，可以在用戶輸入完成后觸發一個AJAX請求。 以下是一個基本的HTML結構示例：

請輸入商品數量：

總價為：

在JavaScript代碼中，我們需要定義一個名為updatePrice的函數，該函數將使用AJAX請求從服務器端獲取商品的單價，并根據數量進行計算并更新頁面上的總價。 以下是一個使用AJAX來更新商品總價的JavaScript代碼示例：

function updatePrice() {
var quantity = document.getElementById("quantity").value;
// 發起AJAX請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var unitPrice = parseFloat(xhr.responseText);
var totalPrice = unitPrice * quantity;
// 更新總價
document.getElementById("totalPrice").innerHTML = totalPrice.toFixed(2);
}
}
};
// 發送AJAX請求到服務器端獲取單價
xhr.open("GET", "/getUnitPrice?productId=1234", true);
xhr.send();
}

在上面的代碼中，首先我們使用JavaScript獲取用戶輸入的數量。然后，創建一個XMLHttpRequest對象并定義其onreadystatechange事件處理函數。在事件處理函數中，我們首先檢查請求的狀態是否為XMLHttpRequest.DONE，然后再判斷響應狀態是否為200，表示請求成功。如果成功，我們從服務器端返回的響應中提取出商品的單價，并通過數量計算出商品的總價。最后，我們將總價更新到頁面上的元素中。 需要注意的是，在實際應用中，我們需要將xhr.open中的URL更改為服務器端獲取商品單價的API接口。 總結起來，使用AJAX修改元素的值可以實現實時更新頁面內容的效果，提升用戶體驗和頁面交互性。我們可以根據用戶輸入的數據，通過AJAX請求從服務器端獲取相關的數據，再根據計算邏輯更新頁面上的內容。這使得網站更加動態且具有實時性，幫助用戶更輕松地使用網站。