PHP+Ajax实现一个简单的二级城市联动
实现原理
-
二级联动在开发当中是一个常见的技术点，主要运用在做一些有包含关系的选择，例如，选择地址的时候，要先确定哪个省然后再确定哪个市。二级联动主要涉及到了JavaScript的局部刷新技术Ajax，不同于一般的全局刷新，它不会重新加载整个页面，而是刷新需要改变值的地方，它的工作流程如下：
-
(1) 向后台发送一个请求
-
(2) 后台接受请求，并根据请求的内容返回对应的数据
-
(3) JavaScript将返回的数据呈现在页面上
-
-
代码实现并不复杂，而且一样的原理，可以实现更多级的联动，比如在省份的前面再增加一级国家。最后的效果如下：
代码实现
- HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级联动</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
#area-box{
width: 500px;
height: 400px;
margin: 100px auto;
border: 1px solid #82b8da;
text-align: center;
}
.area-select{
width: 200px;
height: 30px;
margin-top: 100px;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="area-box">
<select class="area-select" id="province">
<option value="0">请选择省份</option>
<option value="1">福建省</option>
<option value="2">河北省</option>
<option value="3">湖南省</option>
</select>
<select class="area-select" id="city">
<option>请选择城市</option>
</select>
</div>
<script>
$(document).ready(function () {
var url = 'index.php';
$("#province").change(function () {
var address = $(this).val();
$.ajax({
type: 'post',
url: url,
data: {key: address},
dataType: 'json',
success:function (data) {
var status = data.status;
if(status == 200){
var cities = data.data;
var option = '';
for(var i=0; i<cities.length; i++){
option += '<option>' + cities[i] + '</option>';
}
}
else{
var option = '<option>请选择城市</option>';
}
$("#city").html(option);
}
});
});
});
</script>
</body>
</html>
- PHP部分
<?php
/**
* Created by PhpStorm.
* User: jiangnan
* Date: 2018/10/8
* Time: 14:07
*/
$key = $_POST['key']; //获取post的值
$address[1] = array('福州市','厦门市','泉州市', '漳州市', '南平市', '三明市', '龙岩市', '莆田市', '宁德市');
$address[2] = array('石家庄', '保定市', '秦皇岛', '唐山市', '邯郸市', '邢台市', '沧州市', '承德市', '廊坊市', '衡水市', '张家口');
$address[3] = array('长沙市', '郴州市', '娄底市', '衡阳市', '株洲市', '湘潭市', '岳阳市', '常德市', '邵阳市', '益阳市', '永州市', '张家界', '怀化市');
//判断是否在数据范围内，并进行数据的装载
if(!empty($address[$key])){
$result['status'] = 200;
$result['data'] = $address[$key];
}else{
$result['status'] = 220;
}
echo json_encode($result); //返回Json数据
?>