PHP Ajax三級聯動是一種非常實用的前端技術,它可以極大地提高我們的網站的用戶體驗,用于創建多級選擇器的交互,并在每個級別的選擇中動態更新數據。三級聯動的應用場景非常廣泛,比如我們可以用它來實現城市三級聯動、商品分類三級聯動等。下面,我們將詳細介紹PHP Ajax三級聯動的實現。
實現城市三級聯動:
<?php //連接數據庫 $conn=mysql_connect("localhost:8889","root","root"); if(!$conn){ echo "連接不上數據庫"; exit;//中止程序 } mysql_select_db("test",$conn); mysql_query("SET NAMES 'UTF8'");//字符集的設定 //查詢語句 $sql="SELECT * FROM province"; //執行查詢語句 $res=mysql_query($sql,$conn); //循環輸出結果 echo '<select id="province">'; while($row=mysql_fetch_assoc($res)){ echo '<option value="'.$row['id'].'">'.$row['name'].'</option>'; } echo '</select>'; mysql_close($conn); //斷開數據庫 ?>
城市的JavaScript:
$(function(){ //1首先創建一個省份下拉框的change事件 $("#province").change(function(){ //2在change事件內部,獲取到當前省份的id var provinceId=$(this).val(); //3發送get請求,獲取同步省份下的所有城市 $.get("getCity.php",{"provinceId":provinceId},function(data){ //4先將城市下拉框設定為空,方便后面添加元素 $("#city").html("<option value='0'>請選擇城市</option>"); //5循環遍歷所有的城市信息,并將他們添加到城市下拉框中 $.each(data,function(i,obj){ $("#city").append("<option value=''>"+obj.name+"</option>"); }); },"json"); }); //6最后創建一個城市下拉框的change事件 $("#city").change(function(){ //7在change事件內部,獲取到當前城市的id var cityId=$(this).val(); //8發送get請求,獲取同步城市下的所有縣區 $.get("getArea.php",{"cityId":cityId},function(data){ //9先將縣區下拉框設定為空,方便后面添加元素 $("#area").html("<option value='0'>請選擇縣區</option>"); //10循環遍歷所有的縣區信息,并將他們添加到縣區下拉框中 $.each(data,function(i,obj){ $("#area").append("<option value=''>"+obj.name+"</option>"); }); },"json"); }); });
以上代碼中,首先通過PHP腳本從數據庫中獲取到所有省份的信息,然后再通過JavaScript來處理這些信息。在頁面上,用戶可以首先選擇一個省份,接著可以選擇一個城市,最后可以選擇一個縣區。這樣用戶只需要點擊三次,就可以完成任何地區的選擇。