在現代的Web開發中，Ajax已經成為了一種常見的數據交互方式。通過Ajax，我們可以在不刷新整個頁面的情況下，通過異步請求數據并將其插入到頁面中。然而，返回的數據并不總是我們期望的格式，有時候需要對返回的數據進行格式化處理。本文將介紹如何使用Ajax獲取數據，以及如何對返回的數據進行格式化。

假設我們正在開發一個電商網站，我們需要通過Ajax請求一個產品的信息，并顯示在頁面上。通過以下的代碼示例，我們可以通過Ajax發送一個GET請求，并將返回的數據顯示在頁面上：

$.ajax({
url: 'https://example.com/api/products/1',
type: 'GET',
success: function(data) {
$('body').append('<p>' + data.name + '</p>');
$('body').append('<p>' + data.price + '</p>');
}
});

在上面的示例中，我們使用了jQuery庫的ajax函數來發送一個GET請求，并在請求成功時執行一個回調函數。回調函數中，我們將返回的數據以文本的形式插入到頁面上。假設返回的數據格式如下：

{
"name": "iPhone 12",
"price": 999
}

通過以上的代碼，我們可以將產品的名稱和價格顯示在頁面上。

然而，有時候返回的數據并不是我們期望的格式。例如，有時候我們需要在頁面上顯示一組產品的信息。假設我們通過以下的代碼請求一組產品的數據：

$.ajax({
url: 'https://example.com/api/products',
type: 'GET',
success: function(data) {
for (var i = 0; i < data.length; i++) {
$('body').append('<p>' + data[i].name + '</p>');
$('body').append('<p>' + data[i].price + '</p>');
}
}
});

在這個例子中，返回的數據是一個包含多個產品的數組。我們通過一個循環來遍歷數組，并將每個產品的名稱和價格顯示在頁面上。假設返回的數據格式如下：

[
{
"name": "iPhone 12",
"price": 999
},
{
"name": "Samsung Galaxy S21",
"price": 799
},
{
"name": "Google Pixel 5",
"price": 699
}
]

通過以上的代碼，我們可以將每個產品的名稱和價格顯示在頁面上。

有時候，返回的數據并不是直接可以使用的格式。例如，返回的數據可能是一個包含了HTML標簽的字符串。在這種情況下，我們可以使用jQuery的html函數來將數據顯示在頁面上。請看以下的代碼示例：

$.ajax({
url: 'https://example.com/api/description',
type: 'GET',
success: function(data) {
$('body').append('<div>' + data + '</div>');
}
});

在這個例子中，返回的數據是一個包含了HTML標簽的字符串。我們將這個字符串作為HTML代碼插入到頁面上。

總結來說，通過Ajax獲取數據并將其格式化顯示在頁面上是一種非常常見的操作。無論數據是單個對象、數組還是包含HTML標簽的字符串，我們都可以使用各種方法來展示這些數據。通過合理地使用Ajax和數據格式化技術，我們可以實現各種有趣且功能強大的Web應用程序。