使用Ajax給輸入框賦值并顯示是一種常見的前端技術，它可以通過異步請求從服務器獲取數據，然后將數據顯示在頁面上的輸入框中。這種技術在很多網站和應用程序中廣泛應用，能夠提升用戶體驗和頁面的效率。
例如，在一個電商網站中，當用戶選擇了某個商品后，頁面上的輸入框需要顯示該商品的價格。使用Ajax技術，可以在用戶選擇商品的同時，通過異步請求獲取服務器上該商品的價格，然后將價格顯示在對應的輸入框中。這樣，用戶就可以直觀地看到所選商品的價格，方便進行下一步操作。
為了實現這一功能，我們可以在輸入框中添加一個事件監聽器，當用戶進行商品選擇時觸發相應的事件。在事件處理函數中，可以使用Ajax發送異步請求，以獲取商品的價格。下面是一個簡單的例子，演示了如何使用Ajax給輸入框賦值并顯示商品價格：

html
<p>請選擇商品：</p>
<select id="productSelect">
<option value="1">商品1</option>
<option value="2">商品2</option>
<option value="3">商品3</option>
</select>
<p>商品價格：</p>
<input type="text" id="priceInput">
<script>
document.getElementById('productSelect').addEventListener('change', function() {
var productId = this.value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var price = xhr.responseText;
document.getElementById('priceInput').value = price;
}
};
xhr.open('GET', '/getProductPrice?productId=' + productId, true);
xhr.send();
});
</script>

在上面的例子中，當用戶選擇了商品后，事件監聽器會觸發Ajax請求。請求的URL為'/getProductPrice?productId=' + productId，其中的productId是用戶選擇的商品ID。服務器端的代碼可以根據這個ID獲取對應商品的價格并返回。當Ajax請求成功后，xhr.onreadystatechange事件處理函數會獲取到服務器返回的商品價格，并將其賦值給輸入框priceInput的value屬性，從而將價格顯示在輸入框中。
除了顯示商品價格，我們還可以使用Ajax給輸入框賦值并顯示其他類型的數據。例如，當用戶輸入一個城市名字時，我們可以通過異步請求獲取該城市的天氣情況，并將天氣數據顯示在對應的輸入框中。這種實時獲取數據的方法，可以幫助用戶更方便地查看所需信息，提升用戶體驗。
綜上所述，使用Ajax給輸入框賦值并顯示是一個非常實用的前端技術。它可以通過異步請求從服務器獲取數據，并將數據動態地顯示在頁面上的輸入框中。無論是顯示商品價格還是其他類型的數據，這種技術都能夠提升用戶體驗和頁面的效率。通過不斷學習和實踐，我們可以靈活地運用Ajax技術，為用戶呈現更好的前端頁面。