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