jQuery+ajax+json实现三级联动

jQuery+ajax+json实现三级联动

声明：创建的是一个普通的JavaWeb项目，没有使用maven,使用的是jQuery(原因是ajax实现较为简单)，并且将集合对象转换为json类型的数据。

导入的jar包：

• 项目组成介绍:

  index.jsp页面:包含html和jQuery的代码部分。

  LocationServlet类:主要处理网页初始化时将后台省份数据显示到前端。

  LocationCityServlet类:三级联动业务处理。在处理前端jQuery代码时,当用户选择省时传入了一个method=province参数和选择市时传入method=city参数，于是在处理业务时，为了不再麻烦，使用了switch语句进行处理。

  Find类：主要进行数据库的操作。

  ProvinceCityCounty类：对应数据库表

  数据库：MySQL数据库

  数据库中的表有三个字段，为id,pid,name，将所有的省市区的数据放入到同一个数据表中，市的pid对应省的id,区的pid对于市的id。

  JDBCTools类：数据库的连接池。

  c3p0-config.xml文件：有关数据库连接池的配置文件。

• 前端html：

前端显示省市区的信息,其中button按钮点击显示所选择的地区信息。span是来显示信息的地方。

省：<select id="province" name="province" onchange="province()">
    <option value="">请选择省份</option>
</select><br><br>
市：<select id="city" name="city" onchange="city()">
    <option value="">请选择城市</option>
</select><br><br>
区:<select id="county" name="county">
    <option value="">请选择区/县</option>
</select><br><br>
<input type="button" onclick="btn()" value="点击显示选择的地址">
<span id="show"></span>

当页面初始化，省份数据自动显示。

jQuery代码：

  $(function () {
     
            //初始化数据给省
            $.ajax({
     
                type:"post",
                url:"/location",
                data:"pid="+0,
                dataType:"JSON",
                success:function (data) {
     
                    for(var i=0;i<data.length;i++){
     
                        var val=$("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                        $("#province").append(val);
                    }
                }
            })
        })

LocationServlet:使用了注解：@WebServlet("/location")

        String pidStr=req.getParameter("pid");
        Find find=