java ajax三级联动_Ajax实现三级联动省市查询

Ajax之三级联动

效果图

需求分析页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框

选择省，则市下拉框中出现对应的省的下拉的市的信息，选择市，则区/县下拉框中出现对应的数据

技术分析核心：ajax+数据库操作

需求分析1.创建页面：页面中有三个下拉框，分别为省、市、区/县

2.页面加载成功发起ajax请求，请求省的信息，并将响应结果填充到省的下拉框中

3.选择省触发一个新的js函数的执行，该函数中发起新的ajax请求，请求该省下面的市的信息，并将响应数据填充到市下拉框

4.选择市信息触发一个新的js函数的执行，该函数中发起新的ajax请求，请求该市下的区/县信息，并将数据填充到区/县下拉框中

数据库设计创建表(area):存储了省、市、区/县信息

设计表实现一：之村粗了数据，但是数据之间的层级关系没有存储

地区id：areaid

地区名：areaname

设计表实现而：

地区id：areadid

地区名：areaname

地区的上级id：parentid

数据库设计代码：

SET FOREIGN_KEY_CHECKS=0;

-- ------------------------------ Table structure for `area`-- ----------------------------DROP TABLE IF EXISTS `area`;

CREATE TABLE `area` (

`areaid` int(18) NOT NULL COMMENT '区域编号',

`areaname` varchar(50) NOT NULL COMMENT '区域名称',

`parentid` int(18) NOT NULL COMMENT '父级编号',

`arealevel` int(3) NOT NULL COMMENT '区域等级(1省/2市/3区县)',

`status` int(1) NOT NULL DEFAULT '1' COMMENT '状态(1可用/0不可用)',

PRIMARY KEY (`areaid`),

UNIQUE KEY `UK_WEBSITE_AREA` (`areaid`,`parentid`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

测试数据将在最后奉上(代码太多！！)

SQl语句设计：查询所有的省信息

select * from area where parentid = 0

查询选择省的市的信息(加入：选择山东省的areaid为110000)

select * from area where parentid = 110000

查询选择的市的区/县信息(加入：选择的山东省济南市为areaid为110001

select * from area where parentid = 110001;

代码中

select * from area where parentid = ?

此处将不演示java操作的代码

前端ajax代码实现：

--%>

body {

background-color: lightgray;

}

div {

margin: 0 auto;

width: 700px;

margin-top: 20%;

}

select {

width: 200px;

height: 30px;

}

省

市

区/县

function getData(pid, selName) {

$.get("test", {pid: pid}, function (result) {

//通过eval函数吧获取到的数据转换成js代码 eval("var data=" + result);

var sel = $("#" + selName);

//清除下拉框内容 sel.empty();

//填充下拉框 for (var i = 0; i < data.length; i++) {

sel.append("" + data[i].areaName + "")

}

//触发selName下拉框的change时间 $("#" + selName).trigger("change");

})

}

$(function () {

//页面加载后获取省信息 getData(0, "province");

//省改变后获取市内容 $("#province").change(function () {

var pid = $(this).val();

getData(pid, "city")

})

//市改变后获取市内容 $("#city").change(function () {

var pid = $(this).val();

getData(pid, "county");

})

})

省市区县数据

链接：

提取码：5ih8