ajax下拉框回显数据_JavaEE学习——Ajax实现三级联动省市区

效果就是当我们点击选择一个省的时候，市也会自动的变化为该省下面所有的市，当选择一个市 的时候，对应的我们可以选择对应的县区。

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

技术分析：ajax技术+jsp+servlet+jdbc（这里我也用了Spring和MyBatis实现，文末附两种代码）

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

步骤：首先得在数据库中有数据，这里的测试数据不用我们自己写，直接运行就好了，测试数据的sql在文章末尾连接我会和代码一起发送。

2、我们来看代码：

（a、首先是，前端页面的显示，有3个下拉框，并且都加了样式，在div中，让他们居中

（b。然后是导入jQuery

（c,我们知道，当我们点击一个下拉框选择一个值的时候，实际上是向服务器发送了一个请求，局部刷新，使用Ajax技术，但是加载完页面以后，我们就得有省的数据供我们选择，所以加载完之后就得发一个请求去服务器

“area？op=selS”是访问的url路径，这里我的AreaServlet路径是/area，后面的op=selS是附加的参数，因为我有一个BaseServlet，我的AreaServlet继承它，不用每个创建的Servlet都写service（）方法，直接获得对应的方法名，就可以通过反射去调用执行

d）后面的步骤依旧是增删改查的常规步骤，servlet层调用业务层service，service层调用访问数据库的那层（mapper层or导层），因为我这里使用的是MyBatis，所以也就是mapper层，然后去数据库查询

这里需要注意的是，我们的数据都在一张表中，当parentid=0的时候，显示的都是省和直辖市的数据

所以SQL语句是这样的

所以我们第一次请求时的参数是0

然后给省级的框绑定change事件，当我们改变了框里的值，则再向服务器发送一个Ajax的请求，这次请求的值是选中省的那个值

接着又给市的绑定改变的change事件

我们要注意两点就是，当我们加载完页面之后，实际上第一次发了一个请求，请求回来只会让第一个省的框里面有值，当我们选中了省的值，才会去改变市里面的值，当市里面的值改变才会去改变区县里面的值，所以我们需要在第一次请求的函数中调用改变了省的值的函数，同理，市里面也得调用改变了市里面的函数，这样才能让我们第一次访问的时候不是只有省级的框有值

对了，不要忘记每次选下拉框值的时候清空原有内容，还有一点是重复代码太多，我们可以封装共有的，变化的数据可以通过参数传递，下面附上JDBC和使用框架实现的代码：

Ajax三级联动实现省级市区​pan.baidu.com

提取码：8ky0