1.三级地址联动思路如下：
2.建立数据库。这里直接使用网上的地址数库，最后一个字段无用，先不去管它
3.建立一个server.php 文件
<?php
// 数据库连接
mysql_connect("localhost","root","root") or die(mysql_error());
mysql_select_db("ajax_demo");
mysql_query("set names utf8");
// 声明一个数组
$list = array();
// 对省级区域的请求作出反馈
if(isset($_REQUEST['province_id'])){
$sql = 'select * from ecs_region where parent_id='.$_REQUEST['province_id'];
$res = mysql_query($sql);
while($row = mysql_fetch_assoc($res)){
array_push($list,$row);
};
// 把数组转化成json 格式文件
echo json_encode($list);
// 对城市级区域的请求作出反馈
}else if(isset($_REQUEST['city_id'])){
$sql = 'select * from ecs_region where parent_id='.$_REQUEST['city_id'];
$res = mysql_query( $sql );
while($row=mysql_fetch_assoc($res)){
array_push($list,$row);
}
// 把数组转化成json 格式文件
echo json_encode($list);
};
?>
4. 建立一个请求文件：dizhi_argument.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload= function(){
// 编写获取城市地址的函数：getcity();
function getcity(Id){
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var url = 'server.php?province_id='+Id+'&tt='+ Math.random();
xhr.open('GET',url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
var obj = JSON.parse(xhr.responseText);
var city = '';
var Octiy = document.querySelector('#city');
city += "<option value='0'>请选中城市</option>";
for(var i in obj){
city +="<option value='" + obj[i].region_id + "'>" + obj[i].region_name + "</option>";
}
Octiy.innerHTML = city;
}
}
xhr.send(null);
}
// 编写获取区县地址的函数：getDistrict();
function getDistrict(Id){
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var url = "server.php?city_id="+Id+"&tt="+ Math.random(); xhr.open('GET',url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
var obj = JSON.parse(xhr.responseText);
var district = '';
var Odistrict = document.querySelector("#district");
district = "<option value='0'>请选择区县</option>";
for(var i in obj){
district += "<option value='" + obj[i].region_id + "'>" + obj[i].region_name + "</option>";
}
Odistrict.innerHTML = district ;
}
}
xhr.send(null);
}
// 获取城市地址的元素
var Ocity = document.querySelector('#city');
// 对城市地址进行监控，如果改变了，则调用获取区县的函数：getDistrict()
Ocity.onchange = function(){
getDistrict(this.value);
};
// 获取省区地址元素
var Oprovince = document.querySelector('#province');
// 对省区地址进行监控，如果有发生改变，则调用城市的函数：getcity();
Oprovince.onchange= function(){
getcity(this.value);
};
}
</script>
</head>
<body>
<?php
// 服务器连接，数据库选择，设置字符集编码
mysql_connect("localhost","root","root") or die(mysql_error());
mysql_select_db("ajax_demo");
mysql_query("set names utf8");
?> <select name="province" id="province">
<option value="0">请选择省区</option>
<?php
// 调用升级地址，遍历出来
$sql = "select * from ecs_region where parent_id=1" ;
$res = mysql_query($sql);
while($row=mysql_fetch_assoc($res)){ ?>
<option value="<?php echo $row['region_id'] ?>"><?php echo $row['region_name']; ?></option>
<?php
}
?>
</select>
<!-- 城市区块 -->
<select name="city" id="city">
<option value="0">请选择城市</option>
</select>
<!-- 区县区块 -->
<select name="district" id="district">
<option value="0">请选择区县</option>
</select>
</body>
</html>
5.通过地址栏访问：http://localhost/aaa/yuanli/test/dizhi_argument.php
运行结果：结果OK，达到了三级代用的效果
上面使用的是GET 方法传递参数，如果想使用POST方式，只需要把dizhi_argument.php中的
xhr.open('GET',url,true); 改为 xhr.open('POST',url,true);
xhr.send(null); 改为 xhr.send("province_id="+Id);
并在send()函数前加入： xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
这样就可以了