php省城联动_php省市区三级联动

效果

步骤

前端：通过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数据