使用Ajax和jQuery來將后臺數據顯示到input框中是一種非常常見和實用的技術。通過這種方法，我們可以在不刷新頁面的情況下，動態地向input框填充數據，從而提升用戶體驗和頁面的響應速度。例如，在一個用戶注冊頁面中，當用戶輸入用戶名時，我們可以通過Ajax向后臺發送請求，返回一個已經存在的用戶名，并將其顯示在對應的input框中，以提醒用戶此用戶名已被占用。在本文中，我們將詳細介紹如何通過Ajax和jQuery實現這一功能。
首先，我們需要在頁面中引入jQuery庫，以便可以使用其中的Ajax功能。可以通過在HTML文檔頭部的<head>標簽內添加以下代碼來實現：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><div id="myForm">
<input type="text" id="cityInput" placeholder="輸入城市名稱" />
<button id="submitButton">查詢</button>
<br/>
<input type="text" id="weatherInput" placeholder="天氣情況" readonly />
</div>$(() => {
$('#submitButton').click(() => {
const city = $('#cityInput').val(); // 獲取用戶輸入的城市名稱
$.ajax({
url: 'https://example.com/weather',
method: 'GET',
data: { city: city }, // 向后臺發送城市名稱作為參數
success: (response) => {
$('#weatherInput').val(response.weather); // 將后臺返回的天氣情況顯示在輸入框中
},
error: (error) => {
console.error('Ajax請求失敗', error);
}
});
});
});