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=new Find();
        Integer pid=Integer.parseInt(pidStr);
        List<ProvinceCityCounty> list=find.getProvince(pid);
        JSONArray jsonArray=JSONArray.fromObject(list);
        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().print(jsonArray.toString());

Find:

public List<ProvinceCityCounty> getProvince(Integer pid){
        Connection connection= JDBCTools.getConnection();
        String sql="select * from province where pid=?";
        PreparedStatement preparedStatement=null;
        ResultSet resultSet=null;
        List<ProvinceCityCounty> list=new ArrayList<>();
        try {
            preparedStatement=connection.prepareStatement(sql);
            preparedStatement.setInt(1,pid);
            resultSet=preparedStatement.executeQuery();
            while(resultSet.next()){
                list.add(new ProvinceCityCounty(resultSet.getInt(1),resultSet.getInt(2),resultSet.getString(3)));
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            JDBCTools.release(connection,preparedStatement,resultSet);
        }
        return list;
    }

实现三级联动：主要的思想就是，先获取选中的option标签的value的属性值作为pid值，传入后台，使用数据库进行查找时（市的pid对应省的id,区的pid对于市的id），然后将数据返回到前端。

jQuery代码：

 function province() {
            //获取选中的option标签的value的属性值
            var pid=$("#province").val();
            $.ajax({
                type: "post",
                url:"/locationCity?method=province",
                data: "pid="+pid,
                dataType: "JSON",
                success:function (data) {
                    //清空城市以及区下拉列表框的内容
                    $("#city").html("<option value=''>-- 请选择市 --</option>");
                    $("#county").html("<option value=''>-- 请选择县 --</option>");
                    //遍历json，json数组中每一个json，都对应一个省的信息，都应该在省的下拉列表框下面添加一个<option>
                    for(var i=0;i<data.length;i++){
                        var val=$("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                        $("#city").append(val);
                    }
                }
            })
        }
        function city() {
          var pid=$("#city").val();
          $.ajax({
              type: "post",
              url:"/locationCity?method=city",
            data:"pid="+pid,
            dataType:"JSON",
            success:function (data) {
              $("#county").html("<option value=''>-- 请选择县 --</option>");
              for(var i=0;i<data.length;i++){
                var val = $("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                $("#county").append(val);
              }
            }
          })
        }
function btn() {
            var province=$("#province option:selected").text();
            var city=$("#city option:selected").text();
            var county=$("#county option:selected").text();
            var show=$("#show");
            if(province == "请选择省份" || city == "请选择城市" || county == "请选择区/县"){
                show.append("注意：请填写完整的地址");
                $("#show").css("color","red");
            }else {
                show.append("选择的地址是:"+province+","+city+","+county);
                $("#show").css("color","blue");
            }
        }

LocationCityServlet:@WebServlet("/locationCity")

String pidStr=req.getParameter("pid");
        Integer pid=Integer.parseInt(pidStr);
        String method=req.getParameter("method");
        List<ProvinceCityCounty> list=null;
        Find find=new Find();
        switch (method){
            case "province":
                list=find.findCity(pid);
                break;
            case "city":
                list=find.findCounty(pid);
                break;
        }

        JSONArray jsonArray=JSONArray.fromObject(list);
        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().write(jsonArray.toString());

Find:

public List<ProvinceCityCounty> findCity(Integer pid){
        Connection connection=JDBCTools.getConnection();
        String sql="select * from city where city.pid=?";
        PreparedStatement preparedStatement=null;
        ResultSet resultSet=null;
        List<ProvinceCityCounty> list=new ArrayList<>();
        try {
            preparedStatement=connection.prepareStatement(sql);
            preparedStatement.setInt(1,pid);
            resultSet=preparedStatement.executeQuery();
            while (resultSet.next()){
                list.add(new ProvinceCityCounty(resultSet.getInt(1),resultSet.getInt(2),resultSet.getString(3)));
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            JDBCTools.release(connection,preparedStatement,resultSet);
        }
        return list;
    }
    public List<ProvinceCityCounty> findCounty(Integer pid){
        Connection connection=JDBCTools.getConnection();
        String sql="select * from county where county.pid=?";
        PreparedStatement preparedStatement=null;
        ResultSet resultSet=null;
        List<ProvinceCityCounty> list=new ArrayList<>();
        try {
            preparedStatement=connection.prepareStatement(sql);
            preparedStatement.setInt(1,pid);
            resultSet=preparedStatement.executeQuery();
            while (resultSet.next()){
                list.add(new ProvinceCityCounty(resultSet.getInt(1),resultSet.getInt(2),resultSet.getString(3)));
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            JDBCTools.release(connection,preparedStatement,resultSet);
        }
        return list;
    }

JDBCTools:

 private static DataSource dataSource;
    static {
        dataSource=new ComboPooledDataSource("testc3p0");
    }
    public static Connection getConnection(){
        Connection connection=null;
        try {
            connection=dataSource.getConnection();
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return connection;
    }
    public  static void release(Connection connection, Statement statement,ResultSet resultSet){
        try {
            if(connection != null){
                connection.close();
            }
            if(statement != null){
                statement.close();
            }
            if (resultSet != null){
                resultSet.close();
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
    }

c3p0-config.xml文件:

<?xml version="1.0" encoding="UTF-8" ?>
<c3p0-config>
    <named-config name="testc3p0">

        <!-- 指定连接数据源的基本属性 -->
        <property name="user">root</property>
        <property name="password">mlia0927</property>
        <property name="driverClass">com.mysql.jdbc.Driver</property>
        <property name="jdbcUrl">jdbc:mysql://localhost:3306/linkage?useUnicode=true&amp;characterEncoding=UTF-8</property>

        <!-- 若数据库中连接数不足时，一次向数据库服务器申请多少个连接 -->
        <property name="acquireIncrement">5</property>
        <!-- 初始化数据库连接池时连接的数量 -->
        <property name="initialPoolSize">20</property>
        <!-- 数据库连接池中的最小的数据库连接池 -->
        <property name="minPoolSize">2</property>
        <!-- 数据库连接池中的最大的数据库连接数 -->
        <property name="maxPoolSize">40</property>

    </named-config>
</c3p0-config>

• 实现效果: