<div id="weatherContainer"></div>

接下來，在JavaScript中創建一個函數來調用百度天氣API。我們使用了XMLHttpRequest對象來發送異步請求并接收數據：

function getWeather(city) {
var xhr = new XMLHttpRequest();
var url = "https://api.map.baidu.com/weather/v1/?district_id=" + city + "&data_type=all&ak=yourAPIKey";
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayWeather(response);
}
};
xhr.send();
}

在這個函數中，我們將城市的ID作為參數傳遞給百度天氣API的URL。請注意替換URL中的“yourAPIKey”為您自己的API密鑰。然后，我們使用xhr.open()方法來設置請求的方法和URL。當請求的狀態發生變化時，我們使用xhr.onreadystatechange事件處理程序來檢查響應的狀態。如果狀態為4（即請求已完成）并且響應的狀態為200（即請求成功），我們將解析服務器返回的JSON數據，并調用displayWeather()函數來顯示天氣信息。

接下來，我們需要創建一個displayWeather()函數來將天氣信息顯示在頁面上。首先，我們將獲取到的數據轉換為HTML格式，并將其插入到我們之前創建的用于顯示天氣信息的容器中：

function displayWeather(data) {
var container = document.getElementById("weatherContainer");
var html = "";
// 將天氣信息轉換為HTML字符串
html += "<h2>城市：" + data.city + "</h2>";
html += "<p>溫度：" + data.weather[0].temp + "℃</p>";
html += "<p>天氣：" + data.weather[0].weather + "</p>";
html += "<p>風向：" + data.weather[0].wind_direction + "</p>";
html += "<p>風力：" + data.weather[0].wind_power + "</p>";
container.innerHTML = html;
}

在這個函數中，我們首先通過getElementById()方法獲取到之前創建的天氣信息容器。接下來，我們將天氣信息轉換為HTML格式，并將其存儲在一個字符串變量html中。最后，我們使用innerHTML屬性將html插入到容器中，從而將天氣信息顯示在網頁上。

要使用這些函數，我們需要在網頁上觸發一個事件。例如，在按鈕被點擊時，我們將調用getWeather()函數并傳遞一個城市的ID作為參數：

<button onclick="getWeather('101010100')">獲取北京天氣</button>

在這個例子中，當按鈕被點擊時，我們調用getWeather()并傳遞北京的城市ID（101010100）作為參數。然后，getWeather()函數將發送異步請求到百度天氣API，并在接收到響應后調用displayWeather()函數將天氣信息顯示在網頁上。

通過這個例子，我們可以看到使用Ajax調用百度天氣API非常簡單。只需幾行代碼，我們就可以動態地獲取并顯示天氣信息。這種技術在許多實際應用中非常有用，例如天氣預報網站、手機應用程序等。

希望本文能幫助你了解如何通過使用Ajax和百度天氣API來獲取并顯示天氣信息。通過嘗試和探索，你可以利用這個技術創建出更多有趣和實用的應用。