python三级联动函数式_[AJAX] -AJAX,你要学的,都在这儿(案例小剧场-三级联动(经典))...
Ajax案例之三级联动：
功能需求：
页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框
选择省，则市下拉框中出现对应的该省下的市信息，选择市，则区/县下拉框中
出现对应的该市下面的区/县信息
技术分析:
ajax技术+jsp+servlet+mybatis
需求分析(思路):
1、创建页面：页面中有三个下拉框，分别为省、市、区/县
2、页面加载成功发起ajax请求，请求省的信息，并将响应结果填充到省下拉框中
3、选择省触发一个新的js函数 的执行，该函数中发起新的ajax请求请求该省下的市信息，并将响应数据填充到市下拉框(onchange)
4、选择市信息触发一个新的js函数的执行，该函数中发起新的ajax请求请求该市下的区/县信息，并将数据填充到区/县下拉框中(onchange)
数据库设计：
创建表(area)：存储了省、市、区/县信息
设计表实现一：
只存储了数据，但是数据之间的层级关系没有存储。
地区id:areaid
地区名:areaname
设计表实现二：
地区id:areaid
地区名:areaname
地区上级id：parentid
sql语句设计:
查询所有的省信息:
select * from area where parentid=0;
查询选择的省的市信息(假如：选择的山东省的areaid为110000,)
select * from area where parentid=110000;
查询选择的市的区/县信息(假如：选择的山东省的济南市areaid为110001)
select * from area where parentid =110001;
观察上面的代码实际上只要写一个代码就够了 就是查询parentid就行了
select * from area where parentid=?;
数据库实现:
上传附件貌似不行,建议百度自取,或者私信找我要
功能实现：
参照源码即可
代码缺陷：
发现请求省，市，县的代码中基本上是一致的。代码的冗余量有点大
解决:
考虑使用封装
实现:形同的保留，不同的传参。具体参照源码
代码部分
jsp页面
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
三级联动.sel{
width: 200px;
height: 30px;
}
//页面加载执行查询 $(function () {
$.get("area",{parentid:0},function (data) {
//使用eval方法将数据转换为js对象 var areas= eval(data);
//将响应省数据填充到省下拉框中 //获取下拉框选项 var sel1=$("#pre");
//清空原有数据 sel1.empty();
//遍历数组 for (var i=0; i
/*这里拼接选项框内容,显示省份直辖市的信息及得到相应的areaid*/
sel1.append(""+areas[i].areaname+"")
}
//触发省下拉框的change事件 $("#pre").trigger("change")
})
/*页面加载成功,给省下拉框添加事件,查询市的信息*/
$("#pre").change(function () {
//获取当前省的id var areaid1=$("#pre").val();
//发起ajax请求,请求当前省的市信息 $.get("area",{parentid:areaid1},function (data) {
//使用eval方法将数据转换为js对象 var areas2= eval(data);
//将响应省数据填充到省下拉框中 //获取下拉框选项 var sel2=$("#city");
//清空原有数据 sel2.empty();
//遍历数组 for (var i=0; i
/*这里拼接选项框内容,显示省份直辖市的信息及得到相应的areaid*/
sel2.append(""+areas2[i].areaname+"")
}
//触发市省下拉框的change事件 $("#city").trigger("change")
})
})
/*页面加载成功,给市下拉框添加事件,查询区县的信息*/
$("#city").change(function () {
//获取当前市的id var areaid3=$("#city").val();
//发起ajax请求,请求当前省的市信息 $.get("area",{parentid:areaid3},function (data) {
//使用eval方法将数据转换为js对象 var areas3= eval(data);
//将响应省数据填充到省下拉框中 //获取下拉框选项 var sel3=$("#town");
sel3.empty()
//遍历数组 for (var i=0; i
/*这里拼接选项框内容,显示省份直辖市的信息及得到相应的areaid*/
sel3.append(""+areas3[i].areaname+"")
}
})
})
})
省:
市:
区\县: