AJAX(Asynchronous JavaScript and XML) 是一種用于在網(wǎng)頁上異步加載數(shù)據(jù)的技術(shù)。在前端開發(fā)中，經(jīng)常需要使用下拉框?qū)崿F(xiàn)多級聯(lián)動，通過選擇一個下拉框的值來動態(tài)加載下一個下拉框的選項。這種三級聯(lián)動的功能在省市區(qū)選擇、商品分類等場景中經(jīng)常使用到。本文將介紹如何使用 AJAX 來實現(xiàn)下拉框的三級聯(lián)動。

假設(shè)我們要實現(xiàn)一個省市區(qū)三級聯(lián)動的下拉框，首先我們需要在 HTML 中定義三個下拉框，分別是省、市和區(qū)：

<select id="province">
<option value="">請選擇省份</option>
<option value="1">北京市</option>
<option value="2">上海市</option>
<option value="3">廣東省</option>
<option value="4">浙江省</option>
</select>
<select id="city">
<option value="">請選擇城市</option>
</select>
<select id="district">
<option value="">請選擇區(qū)縣</option>
</select>

接下來，我們使用 JavaScript 來實現(xiàn)下拉框的動態(tài)加載。當(dāng)選擇了省份之后，使用 AJAX 請求獲取該省份對應(yīng)的城市數(shù)據(jù)，并將數(shù)據(jù)填充到城市下拉框中。代碼如下：

document.getElementById('province').addEventListener('change', function() {
var provinceId = this.value;
// 發(fā)起 AJAX 請求獲取城市數(shù)據(jù)
var xhr = new XMLHttpRequest();
xhr.open('GET', '/cities?provinceId=' + provinceId, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var cities = JSON.parse(xhr.responseText);
var citySelect = document.getElementById('city');
// 清空原來的選項
citySelect.innerHTML = '<option value="">請選擇城市</option>';
// 填充新的選項
cities.forEach(function(city) {
var option = document.createElement('option');
option.value = city.id;
option.innerText = city.name;
citySelect.appendChild(option);
});
}
};
xhr.send();
});

上述代碼中，我們首先監(jiān)聽省份下拉框的 change 事件，當(dāng)選擇了省份后，獲取選擇的省份的值。然后使用 AJAX 發(fā)起請求，通過傳遞該省份的值作為參數(shù)，請求服務(wù)器返回對應(yīng)的城市數(shù)據(jù)。當(dāng) AJAX 請求成功后，我們解析返回的 JSON 數(shù)據(jù)，并動態(tài)地填充到城市下拉框中。

在這個例子中，我們假設(shè)服務(wù)器返回的城市數(shù)據(jù)為以下格式：

[
{"id": 1, "name": "北京市"},
{"id": 2, "name": "上海市"},
{"id": 3, "name": "廣州市"},
{"id": 4, "name": "深圳市"}
]

通過上述代碼，我們實現(xiàn)了省份和城市二級聯(lián)動。接下來，我們還需要實現(xiàn)城市和區(qū)縣的三級聯(lián)動。思路和上述代碼類似，當(dāng)選擇了城市之后，發(fā)起 AJAX 請求獲取對應(yīng)的區(qū)縣數(shù)據(jù)，并填充到區(qū)縣下拉框中。

document.getElementById('city').addEventListener('change', function() {
var cityId = this.value;
// 發(fā)起 AJAX 請求獲取區(qū)縣數(shù)據(jù)
var xhr = new XMLHttpRequest();
xhr.open('GET', '/districts?cityId=' + cityId, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var districts = JSON.parse(xhr.responseText);
var districtSelect = document.getElementById('district');
// 清空原來的選項
districtSelect.innerHTML = '<option value="">請選擇區(qū)縣</option>';
// 填充新的選項
districts.forEach(function(district) {
var option = document.createElement('option');
option.value = district.id;
option.innerText = district.name;
districtSelect.appendChild(option);
});
}
};
xhr.send();
});

通過以上代碼，我們完成了省市區(qū)三級聯(lián)動的實現(xiàn)。當(dāng)選擇了省份之后，城市下拉框?qū)⒆詣蛹虞d對應(yīng)的城市選項；當(dāng)選擇了城市之后，區(qū)縣下拉框?qū)⒆詣蛹虞d對應(yīng)的區(qū)縣選項。

綜上所述，通過 AJAX 技術(shù)，我們可以實現(xiàn)動態(tài)加載下拉框選項的三級聯(lián)動。這種方式可以大大提升用戶體驗，使得用戶能夠方便地選擇所需的數(shù)據(jù)。