使用php+ajax实现三级联动.docVIP

二级联动和三级联动的效果在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 /TR/html4/loose.dtd html head title三级联动(作者：mckee - )/title meta http-equiv=content-typecontent=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.