Ajax案例之三级联动

一、思路

1.功能需求：
页面中有三个下拉框，分别为省下拉框、市下拉框、区/县下拉框。
选择省，则市下拉框中出现对应的该省下的市信息，
选择市，则区/县下拉框中出现对应的该市下的区/县信息
2.技术分析：
ajax技术+servlet+jsp+jdbc
3.需求分析（思路）：
1）创建页面：页面中有三个下拉框，分别为省/市/区、县；
2）页面加载成功发起ajax请求，请求省的信息，并将响应结果填充到省所在的下拉框；
3）选择省，触发一个新的js函数执行，该函数发起新的ajax请求，请求该省的市信息，并将响应结果填充到市所在的下拉框；
4）选择市信息触发一个新的js函数执行，该函数发起新的ajax请求，请求该省该市的区/县信息，并将响应结果填充到区/县所在的下拉框；
4.数据库设计：
创建表（area）：存储省市区县信息
1）设计表实现一：只存储了数据，但是数据之间的层级关系没有存储
地区id：areaid
地区名：areaname
2）设计表实现二：
地区id：areaid
地区名：areaname
地区上级id：parentid
5.sql语句设计：
查询所有的省信息：
select * from area where parentid=0；
查询选择的省的市信息：（假设查询的省的areaid=1000）
select * from area where parentid=1000；
查询选择的市的区/县信息：（假设查询的市的areaid=1001）
select * from area where parentid=10001；
代码中:
select * from area where parentid=?；
数据库实现：
将资料中的area.sql文件导入到数据库中即可

二、代码实现

1.V层：
select.jsp
首先，导入jquery文件
注：这里遇到一个bug，错误提示为Allocate exception for servlet，最后原因是我在这个项目已经导入了一个jquery文件的jar包，导致重复了；
另一种可能性是，服务器找不到对于的servlet，就去web.xml下面找找原因啦。
详情可看：添加链接描述

<!-- 引入jquery文件 -->
    <script type=