客服端的頁面代碼:
<?php
$conn=mysql_connect("localhost","root",'root');
if($conn){
$sql="use privince";
mysql_query($sql);
$sql="set names utf8";
mysql_query($sql);
$sql="select * from privince";
$res=mysql_query($sql);
$privice_arr=array();
while($row=mysql_fetch_assoc($res)){
$privince_arr[]=$row;
}
mysql_free_result($res);
mysql_close($conn);
}else{
die(mysql_error());
exit;
}
?>
<html>
<head>
<title>
用ajax做省市縣的聯動的效果
</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
var xhr="";
function getXhr(){
if(XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
function chuli(){
if(xhr.readyState==4){
if(xhr.status==200){
var res=eval("("+xhr.responseText+")");
if(res[0].action=='privince'){ //判斷動作，看是創建省，還是市的dom節點
var city=$('city');
city.length=0;
var obj=document.createElement("option");
obj.innerHTML="請選擇市...";
city.appendChild(obj);
for(var i=1;i<res.length;i++){
var city_obj=document.createElement("option");
city_obj.value=res[i].city_name;
city_obj.innerHTML=res[i].city_name;
city.appendChild(city_obj);
}
}else if(res[0].action=='city'){
var county=$('county');
county.length=0;
var obj=document.createElement("option");
obj.innerHTML="請選擇縣...";
county.appendChild(obj);
for(var i=1;i<res.length;i++){
var county_obj=document.createElement("option");
county_obj.value=res[i].county_name;
county_obj.innerHTML=res[i].county_name;
county.appendChild(county_obj);
}
}
}
}
}
function change(obj){
getXhr();
//obj用於判斷選擇的動作和取得用戶的選擇值，
quyu=$(obj).value;
var uri="privinceContro.php?action="+obj+"&area="+encodeURI(quyu)+"date="+new Date();//這裏爲了防止在將數據傳給控制器的時候出現亂碼而出現取數據的錯誤，而用encondeURI函數轉碼
xhr.open("get",uri,true);
xhr.onreadystatechange=chuli;
xhr.send(null);
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<select id="privince" name="privince" onchange="change('privince')">
<option>請選擇省份...</option>
<?php for($i=0;$i<count($privince_arr);$i++){ ?>
<option value="<?php echo $privince_arr[$i]['privince_name']; ?>" >
<?php echo $privince_arr[$i]['privince_name']; ?>
</option>
<?php } ?>
</select>
<select id="city" name="city" onchange="change('city')">
<option>請選擇市...</option>
</select>
<select id="county" name="county">
<option>
請選擇縣...
</option>
</select>
</html>
控制器的代碼：
<?php
$action=trim($_GET['action']);
$quyu=trim($_GET['area']);
$conn=mysql_connect("localhost","root",'root');
if($conn){
$info='';
$sql="use privince";
mysql_query($sql);
$sql="set names utf8";
mysql_query($sql);
if($action=='privince'){
$sql="select * from cities where privince_id =(select privince_id from privince where privince_name='$quyu')";
$res=mysql_query($sql);
$privince_arr=array();
while($row=mysql_fetch_assoc($res)){
$privince_arr[]=$row;
}
$info.='[{"action":"privince"},';
for($i=0;$i<count($privince_arr);$i++){
if($i==count($privince_arr)-1){
$info.='{"city_name":"'.$privince_arr[$i]['city_name'].'"}]';
}else{
$info.='{"city_name":"'.$privince_arr[$i]['city_name'].'"},';
}
}
echo $info;
exit;
}else if($action=='city'){
$sql="select * from county where city_id =(select city_id from cities where city_name='$quyu')";
file_put_contents("D:\myenv\apache\htdocs\ajax\log.txt",$sql,FILE_APPEND);
$res=mysql_query($sql);
$privince_arr=array();
while($row=mysql_fetch_assoc($res)){
$privince_arr[]=$row;
}
$info.='[{"action":"city"},'; //給客服端發送動作的類型
for($i=0;$i<count($privince_arr);$i++){
if($i==count($privince_arr)-1){
$info.='{"county_name":"'.$privince_arr[$i]['county_name'].'"}]';
}else{
$info.='{"county_name":"'.$privince_arr[$i]['county_name'].'"},';
}
}
echo $info;
exit;
}
}else{
die(mysql_error());
exit;
}
數據庫：
create database pricince default charset=utf8;
use privince;
create table privince(
privince_id int unsigned primary key auto_increment not null,
privince_name varchar(24) not null default ''
)
create table cities(
city_id int unsigned primary key auto_increment not null,
city_name varchar(24) not null default '',
privince_id int not null default ''
);
create table county(
county_id int unsigned primary key auto_increment not null,
county_name varchar(24) not null default ''
city_id int not nul default ''
);
insert into privince (privince_name) values('四川省'),('福建省'),('廣東省');
insert into cities (city_name,privince_id) values
('成都市',1),
('遂寧市',1),
('瀘州市',1),
('福州市',2),
('泉州市',2),
('廣州市',3),
('珠海市',3);
insert into county (county_name,city_id) values
('雙流縣',1),
('金牛區',1),
('射洪縣',2),
('大英縣',2),
('瀘縣',3),
('合江縣',3)，
('倉山區',4),
('永泰縣',4),
('晉江',5),
('石獅',5),
('越秀區',6),
('海珠區',6),
('斗門區',7),
('香港區',7);