java ajax级联_Ajax实现动态的二级级联菜单

今天花了点时间用Ajax实现了一个二级级联菜单。整理总结一下。为了把重点放在Ajax和级联菜单的实现上，本文省略了数据库建表语句和操作数据库的代码！

数据库建表语句就不帖出来了。主要有两张表，区域表：district。街道表：street。区域表和街道表是一对多关系，一个区域可以有零到多个街道，一条街道属于一个区域。数据如下：

        

页面代码 index.jsp：

Insert title here

请选择

${district.name }

请选择

初始化主页面一级菜单列表的Servlet代码  InitServlet.java：

1 packagecascade.servlet;2 importjava.io.IOException;3 importjava.util.List;4

5 importjavax.servlet.ServletException;6 importjavax.servlet.http.HttpServlet;7 importjavax.servlet.http.HttpServletRequest;8 importjavax.servlet.http.HttpServletResponse;9

10 importcascade.entity.District;11 importcascade.service.DistrictService;12

13

14 public class InitServlet extendsHttpServlet{15

16 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throwsServletException, IOException {17 doPost(req, resp);18 }19

20 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throwsServletException, IOException {21 req.setCharacterEncoding("UTF-8");22 resp.setCharacterEncoding("UTF-8");23 /*

24 * DistrictService ds为操作数据库的对象.25 * 调用该对象的getAllDistrict()方法，可以从数据库中取得所有的区域信息，封装为List对象，并返回。26 * 其中District是数据库District表的实体类27 * 为了把重点放在Ajax和级联菜单的实现上，本文省略了操作数据库的代码！！！28 */

<