Ajax是一種在Web應用中使用的異步通信技術，可以使網頁實現局部刷新、無需刷新整個頁面的交互效果。結合JSON數據格式，我們可以通過Ajax獲取服務器返回的JSON數據，并在頁面上展示。本文將介紹如何使用Ajax獲取JSON數據，并將數據展示在下拉框中。

假設我們有一個國家和城市的數據，數據格式如下：

[
{
"country": "中國",
"cities": [
"北京",
"上海",
"廣州"
]
},
{
"country": "美國",
"cities": [
"紐約",
"洛杉磯",
"華盛頓"
]
},
{
"country": "英國",
"cities": [
"倫敦",
"曼徹斯特",
"愛丁堡"
]
}
]

我們的目標是根據選擇的國家，在下拉框中動態顯示該國家的城市列表。

一、獲取JSON數據

首先，我們需要通過Ajax從服務器獲取JSON數據。可以使用jQuery的ajax()方法來實現：

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

上述代碼中，我們指定了要請求的URL和數據類型，當請求成功后會執行success回調函數，并將獲取到的JSON數據作為參數傳入。

二、處理JSON數據

在獲取到JSON數據后，我們可以對數據進行處理，以便將其展示在下拉框中。首先，我們需要解析JSON數據：

var options = '';
for (var i = 0; i < data.length; i++) {
options += '<option value="' + data[i].country + '">' + data[i].country + '</option>';
}
$('#country').html(options);

上述代碼通過遍歷獲取到的JSON數據，生成了包含國家名稱的option標簽，并將其添加到id為"country"的下拉框中。在頁面上展示的結果是一個包含所有國家名稱的下拉框。

三、根據選擇的國家顯示城市列表

接下來，我們需要根據用戶選擇的國家，在下拉框中動態顯示該國家的城市列表?？梢詾橄吕蚪壎╟hange事件，并在事件處理函數中根據所選國家來生成對應的城市列表：

$('#country').change(function() {
var selectedCountry = $(this).val();
var cities = '';
for (var i = 0; i < data.length; i++) {
if (data[i].country === selectedCountry) {
for (var j = 0; j < data[i].cities.length; j++) {
cities += '<option value="' + data[i].cities[j] + '">' + data[i].cities[j] + '</option>';
}
}
}
$('#city').html(cities);
});

上述代碼中，我們獲取用戶選擇的國家，并遍歷JSON數據，找到與所選國家相對應的城市列表，并生成包含城市名稱的option標簽。最后，將生成的城市列表添加到id為"city"的下拉框中。

通過上述步驟，我們成功地通過Ajax獲取了JSON數據，并將數據展示在下拉框中。用戶可以根據選擇的國家獲得該國家的城市列表，實現了動態顯示數據的效果。