jQuery和PHP實現二級聯動

隨著互聯網技術的不斷發展，前端技術的應用越來越廣泛，其中二級聯動這種交互方式越來越受到關注。在此介紹如何使用jQuery和PHP實現一個簡單的二級聯動效果。

下面以省市二級聯動為例，在這個聯動中，選擇一個省份，其下面的城市就會隨之而變。

前端頁面

首先，我們需要創建一個前端頁面，用于選擇省份和城市。在這個頁面中，我們需要兩個下拉框，一個用于選擇省份，另一個用于選擇城市。

HTML代碼如下：

<label>請選擇省份：</label>
<select name="province" id="province">
<option value="0" selected>請選擇省份</option>
<option value="1">北京市</option>
<option value="2">上海市</option>
<option value="3">廣東省</option>
</select>
<br>
<br>
<label>請選擇城市：</label>
<select name="city" id="city">
<option value="0" selected>請選擇城市</option>
</select>

這里我們定義了兩個下拉框，一個用于選擇省份，另一個用于選擇城市。在省份下拉框中，我們定義了三個選項，分別代表北京、上海和廣東。在城市下拉框中，我們默認只顯示一個選項“請選擇城市”，當選擇了省份后，我們通過后臺來動態加載其下屬城市列表。

jQuery實現

接著，我們需要使用jQuery來處理用戶選擇省份的事件。具體實現如下：

$('#province').change(function(){
var id = $(this).val();
$.ajax({
type:'GET',
url:'city.php?id='+id,
dataType:'json',
success:function(data){
$('#city').empty();
$.each(data,function(index,city){
$('#city').append('<option value="'+city.id+'">'+city.name+'</option>');
});
}
});
});

這段代碼中，我們首先獲取用戶選擇的省份編號，然后通過ajax請求傳遞給后臺php文件進行處理。通過dataType:'json'設置返回數據格式為json類型，success函數將data形參作為城市信息進行處理。在此過程中，我們清空原有的城市列表項，然后使用jQuery的each函數對城市列表進行循環迭代，逐個向城市下拉框中添加新的列表項。

后臺實現

最后我們需要實現后臺php文件對省市的數據動態加載。具體實現如下：

$id = $_GET['id'];
switch($id){
case 1:
$province = array('id'=>1,'name'=>'北京市');
$citys = array(
array('id'=>2,'name'=>'海淀區'),
array('id'=>3,'name'=>'西城區'),
array('id'=>4,'name'=>'朝陽區'),
array('id'=>5,'name'=>'東城區')
);
break;
case 2:
$province = array('id'=>2,'name'=>'上海市');
$citys = array(
array('id'=>6,'name'=>'南京區'),
array('id'=>7,'name'=>'黃浦區'),
array('id'=>8,'name'=>'浦東新區'),
array('id'=>9,'name'=>'徐匯區')
);
break;
case 3:
$province = array('id'=>3,'name'=>'廣東省');
$citys = array(
array('id'=>10,'name'=>'廣州市'),
array('id'=>11,'name'=>'深圳市'),
array('id'=>12,'name'=>'珠海市'),
array('id'=>13,'name'=>'中山市')
);
break;
}
$result = array('province'=>$province,'citys'=>$citys);
echo json_encode($result);

這段代碼中，我們首先獲取傳遞過來的$id，然后根據不同的省份編號，定義了三個不同的城市列表，并將其放入一個二維數組中。最后，我們將該二維數組通過json_encode函數處理成json格式的數據，并將其返回給前臺。

總結

通過以上步驟，我們成功實現了一個簡單的省市二級聯動效果。通過前臺的下拉框和jQuery的ajax請求，我們向后臺php文件請求數據，并將其解析成json格式返回給前臺，實現了前臺和后臺的無縫銜接。