在現代的Web開發中，經常會遇到需要從服務器獲取數據并在網頁中顯示的情況。而Ajax技術則是一種能夠在不刷新整個網頁的情況下向服務器發送請求并獲取數據的方法。然而，由于服務器返回的數據往往是原始的、未經處理的字符串形式，我們通常需要對其進行格式化后再展示給用戶。本文將詳細介紹使用Ajax從服務器獲取數據并對其進行格式化的方法，幫助讀者理解如何讓網頁上顯示的數據更加易讀易懂。

首先，讓我們通過一個具體的例子來理解為什么需要對從服務器返回的數據進行格式化。假設我們正在開發一個天氣預報的網頁應用，其中需要從服務器獲取當前城市的天氣數據。當我們使用Ajax發送請求后，服務器將返回一段JSON格式的字符串，如下所示：

{
"city": "Beijing",
"temperature": 20,
"weather": "Sunny"
}

然而，直接將這段JSON字符串顯示給用戶，顯然并不直觀，也不符合用戶習慣。因此，我們需要對這段數據進行格式化，例如將城市名、溫度以及天氣狀況這些信息單獨顯示出來，更便于用戶閱讀和理解。接下來，我們將介紹兩種常見的格式化方法。

第一種方法是使用JavaScript進行數據格式化。通過解析從服務器返回的JSON字符串，并將其中的數據提取出來，我們可以使用JavaScript動態地將數據展示在網頁上。以下是一個示例代碼：

$.ajax({
url: "weather-api-url",
method: "GET",
success: function(response) {
var data = JSON.parse(response);
var city = data.city;
var temperature = data.temperature;
var weather = data.weather;
document.getElementById("city").innerHTML = "City: " + city;
document.getElementById("temperature").innerHTML = "Temperature: " + temperature + "°C";
document.getElementById("weather").innerHTML = "Weather: " + weather;
}
});

在上述代碼中，我們首先使用JSON.parse函數將從服務器返回的JSON字符串轉換為JavaScript對象，然后通過對象的屬性將各個數據提取出來，并使用innerHTML屬性將它們顯示在網頁上。這樣，用戶就能清晰地看到城市名、溫度和天氣狀況了。

第二種方法是使用服務器端的模板引擎對數據進行格式化。與前一種方法不同，這種方法是在服務器端將數據與模板結合，生成一個HTML文檔，然后將該文檔返回給客戶端。在這個過程中，我們可以使用模板語言來進行數據的格式化。以下是使用Node.js和EJS模板引擎的示例代碼：

app.get('/weather', function(req, res) {
var data = {
city: "Beijing",
temperature: 20,
weather: "Sunny"
};
res.render('weather.ejs', { data: data });
});

在上述代碼中，我們首先定義了一個數據對象data，其中包含了城市名、溫度和天氣狀況的信息。然后，通過res.render函數，我們將這個數據對象傳遞給EJS模板引擎，并指定要渲染的模板weather.ejs。在weather.ejs模板中，我們可以使用<%= data.city %>、<%= data.temperature %>和<%= data.weather %>等標簽將數據插入到HTML文檔中。最后，服務器將生成的HTML文檔返回給客戶端。

通過上述兩種方法，我們可以在網頁上清晰地展示從服務器獲取的數據，提高用戶的體驗。無論是使用JavaScript進行數據的動態展示，還是在服務器端使用模板引擎生成HTML文檔，都可以讓我們更好地處理從服務器返回的原始數據，使其更易讀易懂。

總結起來，通過Ajax從服務器獲取數據后，我們常常需要對其進行格式化以供用戶閱讀。本文介紹了兩種常見的格式化方法，即使用JavaScript進行數據的動態展示和在服務器端使用模板引擎生成HTML文檔。根據具體的需求，我們可以選擇適合的方法來展示數據，提高用戶體驗。