使用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技术，为用户呈现更好的前端页面。