AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術。它允許異步地從服務器端獲取數據并更新網頁的內容，無需重新加載整個頁面。下拉框的二級聯動是一種常見的需求，即當用戶選擇了第一級下拉框中的一個選項后，第二級下拉框會根據用戶的選擇動態地更新其選項。

假設我們有一個網頁上的下拉框，用于選擇國家和城市。國家的選項有中國、美國和英國，而城市選項則根據選擇的國家的不同而有所變化。當用戶在國家下拉框中選擇了“中國”時，城市下拉框應該顯示中國的城市選項；當用戶在國家下拉框中選擇了“美國”時，城市下拉框應該顯示美國的城市選項；當用戶在國家下拉框中選擇了“英國”時，城市下拉框應該顯示英國的城市選項。

<select id="country"><option value="china">中國</option><option value="usa">美國</option><option value="uk">英國</option></select><select id="city"><option></option></select><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>$(document).ready(function(){
$('#country').change(function(){
var selectedCountry = $(this).val();
// 發送異步請求
$.ajax({
url: 'getCities.php',
type: 'POST',
data: {country: selectedCountry},
dataType: 'json',
success: function(data){
// 更新城市下拉框的選項
$('#city').html('');
for(var i=0; i<data.length; i++){
$('#city').append('<option value="' + data[i] + '">' + data[i] + '</option>');
}
},
error: function(){
// 處理錯誤情況
}
});
});
});
</script>

在上面的代碼中，我們使用了jQuery庫來簡化AJAX的使用。當用戶在國家下拉框中選擇了一個選項后，change事件將被觸發。在事件處理程序中，我們獲取了用戶選擇的國家并發送了一個異步請求到服務器端。服務器端的代碼應該根據這個國家來獲取對應的城市數據，并將數據以JSON格式返回給前端。前端在成功接收到服務器的響應后，通過遍歷數據來更新城市下拉框的選項。

以中國為例，假設服務器端接收到的國家代碼為"china"，并根據這個代碼從數據庫中獲取到了中國的城市數據，如["北京", "上海", "廣州"]。前端代碼對這個數據進行遍歷，動態地更新城市下拉框的選項。最終，當用戶在國家下拉框中選擇了中國時，城市下拉框會顯示北京、上海和廣州這三個選項。

通過這種方式，我們實現了下拉框的二級聯動。當用戶選擇了國家下拉框中的一個選項后，城市下拉框會根據用戶的選擇動態地更新其選項，使得用戶能夠更方便地選擇他們需要的數據。