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来处理这些信息。在页面上,用户可以首先选择一个省份,接着可以选择一个城市,最后可以选择一个县区。这样用户只需要点击三次,就可以完成任何地区的选择。