注意点:

二级联动和三级联动的效果在web上很常见,在网上查了半天资料,写的都不是很清楚,无奈,自己写了个,使用php+ajax实现三级联动,以最常见的省市县三级联动为例!

 1.
用POST发送数据,在2号线函数(也是ajax发送数据的函数:ajaxCall)必须加上一句:xmlObject.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

案例涉及到数据库,数据库设计如下:

接着使用xmlObject.send(data);发送

首先创建一个test数据库,内容如下:

2.3号线函数要注意:

CREATE TABLE IF NOT EXISTS `province` (

  1.禁用缓存(建议,不必要):header(“Cache-Control:no-cache”);

  `province_id` int(2) NOT NULL AUTO_INCREMENT,

  2.使用XML数据格式必须加上:header(“Content-Type: text/xml;
charset=gb2312”);//这里要写XML

  `province_name` varchar(20) NOT NULL,

  3.若使用WAMP5集成环境安装的MYSQL,在查询数据库时候,必须加上:

  PRIMARY KEY (`province_id`)

    $charset = “gb2312”;

) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

*    mysql_query(“SET character_set_connection=$charset,
character_set_results=$charset, character_set_client=binary”);
//这句是必须的,解决中文乱码加密问题s*

 

*   否则就会乱码加密,今天我就是在这里浪费了很久时间,我是用ECSHOP
GBK版 默认安装的数据库*

INSERT INTO `province` (`province_id`, `province_name`) VALUES

* 4.若用XML接受数据,回调函数必须分IE和非IE处理,否则总是有一方娶不到XML数据*

(1, ‘安徽’),

*  处理代码如下:*

(2, ‘浙江’);

*   *

 

function getXMLData(tagName)//获取XML数据,分IE和非IE处理
{
var info;

CREATE TABLE IF NOT EXISTS `city` (

if(window.ActiveXObject) //IE取回XML文件方法
{
var doc = new ActiveXObject(“MSxml2.DOMDocument”);

  `city_id` int(4) NOT NULL AUTO_INCREMENT,

doc.loadXML(xmlObject.responseText);

  `city_name` varchar(20) NOT NULL,

info = doc.getElementsByTagName(tagName);

  `province_id` int(4) NOT NULL,

}
else //—————————非IE取回XML文件方法
{
info = xmlObject.responseXML.getElementsByTagName(tagName);

  PRIMARY KEY (`city_id`)

}

) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

return info;
}

 

 

INSERT INTO `city` (`city_id`, `city_name`, `province_id`) VALUES

下面就是我做的一个省市联动测试

(1, ‘合肥’, 1),

网站:http://shichangyi110.xicp.net/ajax/

(2, ‘安庆’, 1),

代码如下:

(3, ‘南京’, 2),

index.php

(4, ‘徐州’, 2);

 

 

 

CREATE TABLE IF NOT EXISTS `county` (

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>省事联动测试</title>
<style type=”text/css” >
select{
width:100px;
}
</style>
<script type=”text/javascript” >

  `county_id` int(4) NOT NULL AUTO_INCREMENT,

 

  `county_name` varchar(20) NOT NULL,

var thisId = “”; //当前操作的selectI的D

  `city_id` int(4) NOT NULL,

 

  PRIMARY KEY (`county_id`)

var xmlObject; //ajax 对象全局变量,

) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

 

 

function getAjaxObject()//AJAX 1号线,返回一个AJAX 对象引擎
{
var xmlObject ;

INSERT INTO `county` (`county_id`, `county_name`, `city_id`) VALUES

if(window.ActiveXObject)
{

(1, ‘怀宁’, 2),

xmlObject = new ActiveXObject(“Microsoft.XMLHTTP”);
}
else
{
xmlObject = new XMLHttpRequest();
}

(2, ‘望江’, 2),

return xmlObject ;
}

(3, ‘肥东’, 1),

 

(4, ‘肥西’, 1);

function ajaxCall(id) //ajax 二号线 ,这里采用 post 传递参数
{
xmlObject = new getAjaxObject();

对数据库说明:我创建了三张表,分别是省(province),市(city),县(county),插入了几条测试数据,当然你也可以设计一张表,效率当然没一张表好,所以不建议使用,看你个人习惯。

if(xmlObject)
{
var url = “chuli.php”;

实现过程并不是很难,思路如下:

var data = “id=” + id;

      1) 初始化所有的省份,这个可以直接从数据库中查询出来省份
      2)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出请求传递到服务端的程序中
      3)服务端根据客户端的请求,查询数据库,并按照一定的格式返回给客户端
      4)客户端获取服务端的数据,进行必要的处理显示出来

xmlObject.open(“post”,url,true);

创建select.php (代码简陋,只是实现功能而已,说明原理即可!)

 

1 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd"&gt;

xmlObject.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

2 <html>

xmlObject.onreadystatechange = repayFuncion;

3 <head>

xmlObject.send(data);

4 <title>三级联动(作者:mckee – www.phpddt.com)</title>

}

5 <meta http-equiv=”content-type”content=”text/html; charset=UTF-8″/>

}

6 <script>

 

7 function createAjax(){

function repayFuncion() //ajax 四号线 ,这里采用 xml
接受数据,这里还涉及到xmldom编程
{

8 var xmlHttp = false;

 

9 if (window.XMLHttpRequest){

if(xmlObject.readyState==4 && xmlObject.status==200)
{

10 xmlHttp = new XMLHttpRequest();

var info = getXMLData(“res”);//获取XML数据

11 }else if(window.ActiveXObject){

$(thisId).length = 0;//清楚select 中的option节点

12 try{

for(i=0;i<info.length;i++)
{

13 xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);

var optionId = info[i].childNodes[0].childNodes[0].nodeValue;

14 }catch(e){

var optionValue =
info[i].childNodes[1].childNodes[0].nodeValue;

15 try{

var optionNode = document.createElement(‘option’);

16 xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

optionNode.value = optionId;

17 }catch(e){

optionNode.innerText =optionValue;

18 xmlHttp = false;

$(thisId).appendChild(optionNode);

19 }

}

20 }

}

21 }

}

22 return xmlHttp; 

 

23 }

function getXMLData(tagName)//获取XML数据,分IE和非IE处理
{
var info;

24 

if(window.ActiveXObject) //IE取回XML文件方法
{
var doc = new ActiveXObject(“MSxml2.DOMDocument”);

25 var ajax = null;

doc.loadXML(xmlObject.responseText);

26 function getCity(province_id){

info = doc.getElementsByTagName(tagName);

27 ajax = createAjax();

 

28 ajax.onreadystatechange=function(){

}
else //—————————非IE取回XML文件方法
{
info = xmlObject.responseXML.getElementsByTagName(tagName);

29 if(ajax.readyState == 4){

}

30 if(ajax.status == 200){ 

return info;
}

31 var cities = ajax.responseXML.getElementsByTagName(“city”);

 

32 $(‘city’).length = 0;

function $(id)//常用函数,通过ID取对象
{
return document.getElementById(id);
}

33 var myoption = document.createElement(“option”);

 

34 myoption.value = “”;

function getProvice()//获取省
{
thisId = “Province”;

35 myoption.innerText = “–请选择城市–“;

var id = ‘1’;

36 $(‘city’).appendChild(myoption);

ajaxCall(id);

37 for(var i=0;i<cities.length;i++){

}

38 var city_id = cities[i].childNodes[0].childNodes[0].nodeValue;

 

39 var city_name = cities[i].childNodes[1].childNodes[0].nodeValue;

function getCity()//获取市
{
thisId = “City”;

40 var myoption = document.createElement(“option”);

$(“County”).length = 0;

41 myoption.value = city_id;

var id = $(“Province”).value;

42 myoption.innerText = city_name;

ajaxCall(id);

43 $(‘city’).appendChild(myoption);

}

44 }

 

45 }

function getCounty()//获取县城
{
thisId = “County”;

46 }

var id = $(“City”).value;

47 }

if($(“City”).length)
{
ajaxCall(id);
}

48  

}

49 ajax.open(“post”,”selectPro.php”,true);

 

50 ajax.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

window.onlaod = getProvice();//页面开始载入省

51 ajax.send(“province_id=”+province_id);

 

52  

</script>
</head>

53 }

 

54  

<body>
<form action=”javascript:void(0)” method=”post”>
<label for=”username” >用户名:</label> <input
type=”text” name=”username” id=”username” width=”60px” /><br
/>
<label for=”psd” >密  码:</label> <input
type=”password” name=”psd” id=”psd” width=”80px” /></br>
<label for=”psd” >地  址:</label>
<select id=”Province” onclick=”getCity()”>
</select> 

55 function getCounty(city_id){

<select id=”City” onclick=”getCounty()” >
</select> 

56 ajax = createAjax();

<select id=”County” name=”xian” >
</select>
<input type=”submit” value=”提交” />
</form>
</body>
</html>

57 ajax.onreadystatechange=function(){

 

58 if(ajax.readyState == 4){

 

59 if(ajax.status == 200){

chuli.php

60  

 

61 var cities = ajax.responseXML.getElementsByTagName(“county”);

网站地图xml地图