AJAX（Asynchronous JavaScript and XML）是一種在網頁中實現異步數據交互的技術，而JSON（JavaScript Object Notation）則是一種數據格式。在開發中，我們經常需要使用AJAX和JSON來實現級聯功能，以實現多個下拉框之間的數據交互。例如，當我們選擇一個國家時，第二個下拉框會自動更新顯示該國家的所有省份或州，再選擇一個省份或州時，第三個下拉框則會顯示該省份或州的所有城市。本文將介紹如何使用AJAX和JSON來實現這種級聯效果，并給出具體的實例。

首先，在HTML中定義三個下拉框：

請選擇國家中國美國請選擇省份請選擇城市

在JavaScript中，我們使用AJAX來獲取JSON數據，并將其填充到下拉框中。

function updateProvince() {
var country = document.getElementById("country").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "getProvinces.php?country=" + country, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var provinces = JSON.parse(xhr.responseText);
var select = document.getElementById("province");
select.innerHTML = "";
for (var i = 0; i< provinces.length; i++) {
var option = document.createElement("option");
option.value = provinces[i];
option.innerHTML = provinces[i];
select.appendChild(option);
}
var citySelect = document.getElementById("city");
citySelect.innerHTML = "請選擇城市";
}
};
xhr.send();
}
function updateCity() {
var country = document.getElementById("country").value;
var province = document.getElementById("province").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "getCities.php?country=" + country + "&province=" + province, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var cities = JSON.parse(xhr.responseText);
var select = document.getElementById("city");
select.innerHTML = "";
for (var i = 0; i< cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i];
option.innerHTML = cities[i];
select.appendChild(option);
}
}
};
xhr.send();
}

在服務器端，我們需要根據請求的參數來獲取對應的數據，并以JSON格式返回給客戶端。

getProvinces.php：
if ($_GET["country"] === "China") {
$provinces = array("北京", "上海", "廣東", "浙江");
} else if ($_GET["country"] === "USA") {
$provinces = array("California", "Texas", "New York", "Florida");
}
echo json_encode($provinces);
getCities.php：
if ($_GET["country"] === "China" && $_GET["province"] === "北京") {
$cities = array("北京市");
} else if ($_GET["country"] === "China" && $_GET["province"] === "上海") {
$cities = array("上海市");
} else if ($_GET["country"] === "China" && $_GET["province"] === "廣東") {
$cities = array("廣州市", "深圳市", "珠海市");
} else if ($_GET["country"] === "China" && $_GET["province"] === "浙江") {
$cities = array("杭州市", "寧波市", "溫州市");
} else if ($_GET["country"] === "USA" && $_GET["province"] === "California") {
$cities = array("Los Angeles", "San Francisco", "San Diego");
} else if ($_GET["country"] === "USA" && $_GET["province"] === "Texas") {
$cities = array("Houston", "Dallas", "Austin");
} else if ($_GET["country"] === "USA" && $_GET["province"] === "New York") {
$cities = array("New York City", "Buffalo", "Rochester");
} else if ($_GET["country"] === "USA" && $_GET["province"] === "Florida") {
$cities = array("Miami", "Orlando", "Tampa");
}
echo json_encode($cities);

通過上述代碼，當我們選擇國家為中國時，第二個下拉框會顯示中國的省份，選擇北京時，第三個下拉框會顯示北京市。類似地，當我們選擇美國時，第二個下拉框會顯示美國的州，選擇California時，第三個下拉框會顯示洛杉磯等城市。

通過使用AJAX和JSON來實現級聯效果，我們可以方便地實現多個下拉框之間的數據交互，提高用戶體驗。以上的例子只是示意，根據實際業務需求，可以根據具體的數據結構和接口來進行相應的修改和優化。