在前端開發中，我們經常需要使用Ajax來獲取后端的數據，并將這些數據填充到表單當中。這樣做的好處是可以實現數據的實時更新和動態展示，使用戶體驗更加友好。下面我們將通過舉例來說明如何使用Ajax獲取數據填充表單。

假設我們有一個注冊頁面，需要用戶輸入姓名、年齡和郵箱。我們希望用戶在輸入郵箱的同時，頁面上顯示出該用戶的默認頭像。這時候就可以使用Ajax來獲取用戶的頭像數據，并將數據填充到表單中。

<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="age">年齡:</label>
<input type="number" id="age" name="age"><br>
<label for="email">郵箱:</label>
<input type="email" id="email" name="email"><br>
<img id="avatar" src="default-avatar.jpg" alt="默認頭像">
</form>

在上述代碼中，我們給每個輸入框和默認頭像設置了相應的id，以便于通過JavaScript的document.getElementById()函數來訪問它們。

接下來，我們需要編寫JavaScript代碼來完成Ajax請求和數據填充的功能。

var emailInput = document.getElementById('email');
var avatarImg = document.getElementById('avatar');
emailInput.addEventListener('input', function() {
var email = emailInput.value;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getUserAvatar.php?email=' + email, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var avatarUrl = xhr.responseText;
avatarImg.src = avatarUrl;
}
};
xhr.send();
});

在上述代碼中，我們首先通過document.getElementById()函數獲取了輸入框和默認頭像的元素對象，分別賦值給emailInput和avatarImg變量。然后，我們給輸入框添加了一個input事件監聽器，在用戶輸入郵箱時觸發該事件。

當input事件被觸發時，我們首先獲取輸入框中的郵箱地址，并拼接成一個請求URL。然后，創建一個XMLHttpRequest對象，并使用open()方法指定請求的類型、URL和是否異步。接著，我們通過onreadystatechange事件監聽器來監聽Ajax請求的狀態變化，當狀態為4（即請求已完成）且狀態碼為200（即請求成功）時，我們獲取到后端返回的頭像URL，并將其賦值給默認頭像的src屬性，從而實現了數據填充的功能。

通過上述實例，我們可以看到使用Ajax獲取數據填充表單非常簡單。我們只需要先獲取到需要填充數據的表單元素對象，然后通過Ajax請求來獲取數據，并將獲取到的數據填充到對應的表單元素中即可。這種方法不僅可以用于填充頭像數據，還可以用于填充其他需要實時更新的表單數據，如用戶信息、地理位置、價格等。

總結起來，使用Ajax獲取數據填充表單可以提高用戶體驗，增加交互性。通過向后端請求數據并將數據填充到表單中，可以實現數據的實時更新和動態展示。這對于提升用戶體驗和增加網站的吸引力非常有幫助。