在現代的網頁開發中，Ajax和JSON是兩個非常重要的技術。Ajax（Asynchronous JavaScript and XML）是一種利用JavaScript和XML進行網頁異步通信的技術，可以實現不刷新整個網頁的情況下與服務器進行數據交互。而JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，常用來在客戶端和服務器之間傳輸數據。本文將重點探討如何利用Ajax和JSON來顯示格式化的數據。

假設我們有一個簡單的電影數據庫，保存著電影的名稱、導演、演員和上映日期等信息。我們希望通過Ajax和JSON來獲取這些電影的數據，并將其格式化展示在網頁上。

首先，我們需要使用Ajax來從服務器獲取電影數據。可以使用jQuery的Ajax函數來進行異步請求：

$.ajax({
url: 'movies.json',
dataType: 'json',
success: function(data) {
// 在這里處理獲取到的數據
}
});

這段代碼會向服務器發起一個GET請求，請求movies.json文件，并指定返回的數據類型為JSON。當請求成功后，success回調函數會被執行，并將返回的數據作為參數傳入。接下來，我們可以開始處理這些數據。

一種常見的做法是將數據逐個遍歷，使用HTML字符串來顯示。例如，我們可以使用一個

列表來展示電影數據：

var moviesHtml = '';
$.each(data, function(index, movie) {
moviesHtml += '
' +
'
' + movie.title + '
' +
'
導演：' + movie.director + '
' +
'
演員：' + movie.actors.join(', ') + '
' +
'
上映日期：' + movie.releaseDate + '
' +
'
';
});
$('#movies').html(moviesHtml);

上述代碼會遍歷電影數據，并將每個電影的信息以HTML字符串的形式拼接到moviesHtml中。最后，將拼接好的HTML字符串設置為一個具有id為movies的元素的內容，從而將數據格式化后顯示在網頁上。

除了逐個遍歷和拼接HTML字符串的方式外，我們也可以使用模板引擎來更靈活地格式化顯示數據。例如，可以使用Mustache.js這個簡單易用的模板引擎：

var template = $('#movie-template').html();
var rendered = Mustache.render(template, data);
$('#movies').html(rendered);

上述代碼中，我們首先使用jQuery的$函數來獲取一個id為movie-template的元素的內容，該元素是一個包含了電影數據模板的