ajax技术+jsp+servlet+jdbcAjax案例之三级联动

Ajax案例之三级联动:
功能需求:
页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框
选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县下拉框中
出现对应的该市下面的区/县信息
技术分析:
ajax技术+jsp+servlet+jdbc
需求分析(思路):
1、创建页面:页面中有三个下拉框,分别为省、市、区/县
2、页面加载成功发起ajax请求,请求省的信息,并将响应结果
填充到省下拉框中
3、选择省触发一个新的js函数 的执行,该函数中发起新的ajax请求
请求该省下的市信息,并将响应数据填充到市下拉框
4、选择市信息触发一个新的js函数的执行,该函数中发起新的ajax请求
请求该市下的区/县信息,并将数据填充到区/县下拉框中
数据库设计:
创建表(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;
代码中
select * from area where parentid=?;
数据库实现:将资料中提供的area.sql文件导入到数据库中即可
功能实现:参照源码即可
代码缺陷:
发现请求省,市,县的代码中基本上是一致的。代码的冗余量有点大
解决:
考虑使用封装
实现:形同的保留,不同的传参。具体参照源码

你可能感兴趣的:(自己总结)