效果
步骤
前端:通过ajax请求获取数据,使用了jquery
页面一开始加载所有省份信息 -》当选择省下拉框后触发改变监听时间-change -》当选择市下拉框后触发改变监听时间-change
获取数据后遍历后端返回的数据 -》 $.each(data,function(i,item)){...}
后端:接受请求,操作数据库-查询数据,返回json数据
数据: -》demo.sql -》 省市区的信息
省市区sql.zip
代码
前端:
省:请选择省份
市:请选择市
区:请选择县
//引入jquery
$(function() {
//页面初始,加载所有的省份
$.ajax({
type: "get",
url: "getGeography.php",
data: {"type":1},
dataType: "json",
success: function(data) {
//遍历json数据,组装下拉选框添加到html中
$("#provinces").html("请选择省");
$.each(data, function(i, item) {
$("#provinces").append("" + item.province_name + "");
});
}
});
//监听省select框
$("#provinces").change(function() {
$.ajax({
type: "get",
url: "getGeography.php",
data: {"pnum": $(this).val(),"type":2},
dataType: "json",
success: function(data) {
//遍历json数据,组装下拉选框添加到html中
$("#citys").html("请选择市");
$.each(data, function(i, item) {
$("#citys").append("" + item.city_name + "");
});
}
});
});
//监听市select框
$("#citys").change(function() {
$.ajax({
type: "get",
url: "getGeography.php",
data: {"cnum": $(this).val(),"type":3},
dataType: "json",
success: function(data) {
//遍历json数据,组装下拉选框添加到html中
$("#countys").html("请选择区");
$.each(data, function(i, item) {
$("#countys").append("" + item.area_name + "");
});
}
});
});
});
PHP:
//连接数据库
//$conn = ...
$type = isset($_GET['type'])?$_GET['type']:0;//获取请求信息类型 1省 2市 3区
$province_num = isset($_GET['pnum'])?$_GET['pnum']:'440000';//根据省编号查市信息
$city_num = isset($_GET['cnum'])?$_GET['cnum']:'440100';//根据市编号查区信息
switch ($type) {//根据请求信息类型,组装对应的sql
case 1://省
$sql = "SELECT * FROM province";
break;
case 2://市
$sql = "SELECT * FROM city WHERE province_num='{$province_num}'";
break;
case 3://区
$sql = "SELECT * FROM area WHERE city_num='{$city_num}'";
break;
default:
die('no data');
break;
}
$result = mysqli_query($conn, $sql);//执行查询sql
if (mysqli_num_rows($result) <= 0){
die("no data");
}
// 组装数据输出
$rows = array();
while($row = mysqli_fetch_assoc($result)) {
$rows[] = $row;
}
echo json_encode($rows);//返回json数据