编程语言
首页 > 编程语言> > php+ajax实现城市三级联动(以省市县三级联动为例)

php+ajax实现城市三级联动(以省市县三级联动为例)

作者:互联网

php+ajax实现城市三级联动(以省市县三级联动为例)


二级联动和三级联动的效果在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)客户端获取服务端的数据,进行必要的处理显示出来

 

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

详细代码博客中无法写入,敬请谅解!大家可以去下载,下载地址是:

http://pan.baidu.com/s/1o6ypWOa
完成后的效果图如下:

 

标签:province,city,name,为例,county,联动,NULL,id,三级
来源: https://www.cnblogs.com/Rukh/p/16696278.html