您的位置：首页 > 编程语言 > PHP开发

php+ajax实现三级联动（以省市县三级联动为例）

2012-09-25 00:00 656 查看
二级联动和三级联动的效果在web上很常见，在网上查了半天资料，写的都不是很清楚，无奈，自己写了个，使用php+ajax实现三级联动，以最常见的省市县三级联动为例！
案例涉及到数据库，数据库设计如下：
首先创建一个test数据库，内容如下：
CREATE TABLE IF NOT EXISTS `province` (
`province_id` int(2) NOT NULL AUTO_INCREMENT,
`province_name` varchar(20) NOT NULL,
PRIMARY KEY (`province_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

INSERT INTO `province` (`province_id`, `province_name`) VALUES
(1, '安徽'),
(2, '浙江');

CREATE TABLE IF NOT EXISTS `city` (
`city_id` int(4) NOT NULL AUTO_INCREMENT,
`city_name` varchar(20) NOT NULL,
`province_id` int(4) NOT NULL,
PRIMARY KEY (`city_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

INSERT INTO `city` (`city_id`, `city_name`, `province_id`) VALUES
(1, '合肥', 1),
(2, '安庆', 1),
(3, '南京', 2),
(4, '徐州', 2);

CREATE TABLE IF NOT EXISTS `county` (
`county_id` int(4) NOT NULL AUTO_INCREMENT,
`county_name` varchar(20) NOT NULL,
`city_id` int(4) NOT NULL,
PRIMARY KEY (`county_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

INSERT INTO `county` (`county_id`, `county_name`, `city_id`) VALUES
(1, '怀宁', 2),
(2, '望江', 2),
(3, '肥东', 1),
(4, '肥西', 1);
对数据库说明：我创建了三张表，分别是省（province），市（city）,县（county）,插入了几条测试数据，当然你也可以设计一张表，效率当然没一张表好，所以不建议使用，看你个人习惯。
实现过程并不是很难，思路如下：
1) 初始化所有的省份，这个可以直接从数据库中查询出来省份 2）当用户选择省份的时候触发事件，把当前的省份的id通过ajax发出请求传递到服务端的程序中 3）服务端根据客户端的请求，查询数据库，并按照一定的格式返回给客户端 4）客户端获取服务端的数据，进行必要的处理显示出来
创建select.php (代码简陋，只是实现功能而已，说明原理即可！)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>三级联动(作者：mckee - www.phpddt.com)</title>
 <meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
 <script>
	function createAjax(){
			var xmlHttp = false;
			if (window.XMLHttpRequest){
				xmlHttp = new XMLHttpRequest();
			}else if(window.ActiveXObject){
				try{
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				}catch(e){
					try{
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					}catch(e){
						xmlHttp = false;
					}
				}
			}
			return xmlHttp;	
	}
	
	var ajax = null;
	function getCity(province_id){
		ajax = createAjax();
		ajax.onreadystatechange=function(){
			if(ajax.readyState == 4){
				if(ajax.status == 200){				
					var cities = ajax.responseXML.getElementsByTagName("city");
					$('city').length = 0;
					var myoption = document.createElement("option");
					myoption.value = "";
					myoption.innerText = "--请选择城市--";
					$('city').appendChild(myoption);
					for(var i=0;i<cities.length;i++){
						var city_id = cities[i].childNodes[0].childNodes[0].nodeValue;
						var city_name = cities[i].childNodes[1].childNodes[0].nodeValue;
						var myoption = document.createElement("option");
						myoption.value = city_id;
						myoption.innerText = city_name;
						$('city').appendChild(myoption);
					}
				}
			}
		}

		ajax.open("post","selectPro.php",true);
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.send("province_id="+province_id);

	}

	function getCounty(city_id){
		ajax = createAjax();
		ajax.onreadystatechange=function(){
			if(ajax.readyState == 4){
				if(ajax.status == 200){

					var cities = ajax.responseXML.getElementsByTagName("county");
					$('county').length = 0;
					var myoption = document.createElement("option");
					myoption.value = "";
					myoption.innerText = "--请选择县--";
					$('county').appendChild(myoption);
					for(var i=0;i<cities.length;i++){
						var city_id = cities[i].childNodes[0].childNodes[0].nodeValue;
						var city_name = cities[i].childNodes[1].childNodes[0].nodeValue;
						var myoption = document.createElement("option");
						myoption.value = city_id;
						myoption.innerText = city_name;
						$('county').appendChild(myoption);
					}
				}
			}
		}
		ajax.open("post","selectPro.php",true);
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.send("city_id="+city_id);
	}

	function $(id){
		return document.getElementById(id);
	}

 </script>
</head>      
<body>
<form name="location">
<select name="province" onchange="getCity(this.value)">
<option value="">-- 请选择省份--</option>
<?php
	$conn = mysql_connect("localhost","root","");
	mysql_select_db("test");
	mysql_query("set names utf8");
	$sql = "select * from province"; 
	$result = mysql_query( $sql ); 
	while($res = mysql_fetch_assoc($result)){ 
?> 
<option value="<?php echo $res['province_id']; ?>"><?php echo $res['province_name']?></option> 
<?php
	}	
?>
</select>

<select name="city" id="city" onChange="getCounty(this.value)">
 <option value="">--请选择城市--</option>
</select>

<select name="county" id="county">
  <option value="">--请选择县--</option>
</select>
</form>
</body>
</html>

创建selectPro.php页面：

<?php
	//禁止缓存(www.phpddt.com原创)
	header("Content-type:text/xml; charset=utf-8");
	header("Cache-Control:no-cache");
	//数据库连接
	$conn = mysql_connect("localhost","root","");
	mysql_select_db("test");
	mysql_query("set names utf8");
	
	if(!empty($_POST['province_id'])){
		
		$province_id = $_POST['province_id'];
		$sql = "select * from city where province_id = {$province_id}";
		$query = mysql_query($sql);
		$info = "<province>";
		while($res = mysql_fetch_assoc($query)){
			$info .= "<city>";
			$info .= "<city_id>".$res['city_id']."</city_id>";
			$info .= "<city_name>".$res['city_name']."</city_name>";
			$info .= "</city>";
		}
		$info .= "</province>";
		echo $info;
	}
	
	if(!empty($_POST['city_id'])){
		
		$city_id = $_POST['city_id'];
		$sql = "select * from county where city_id = {$city_id}";
		$query = mysql_query($sql);
		$info = "<city>";
		while($res = mysql_fetch_assoc($query)){
			$info .= "<county>";
			$info .= "<county_id>".$res['county_id']."</county_id>";
			$info .= "<county_name>".$res['county_name']."</county_name>";
			$info .= "</county>";
		}
		$info .= "</city>";
		echo $info;
	}
?>

界面如下：


本代码在IE测试正常，欢迎大家提出建议和批评！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航