省市区三级联动（简单又实用）

那么首先我们需要全国各地的省市区信息，具体自己动动小手：

链接：https://pan.baidu.com/s/1ofVkyJgGNG0QNSCDJan3AA
提取码：call
同时感谢站上的大哥提供的省市区信息，上面的不知道是哪一年的，若有需要请访问大哥的库，链接如下：
三级联动的数据源：可以到我的库里面下载整理好的省市区县乡镇行政区划数据+坐标矢量边界地理围栏(sql、geojson、shp)，这个库会长期维护，多级联动、echarts测试例子: https://xiangyuecn.gitee.io/areacity-jsspider-statsgov/

具体
一：创建jsp文件
1.我们创建一个jsp文件，就叫china.jsp吧：

这样就有了简单的样式啦！

---

二：JDBC请求数据库数据

jQuery包自取点：（记得引入哦）
链接：https://pan.baidu.com/s/1rYWsx653xIHX1r_r9NBEuw
提取码：call

---

三：省市区的pojo类
创建pojo类：Province，City，Area。（就是封装数据用的，大家懂的）
1.省:

---

2.市：

---

3.区：

---

四：JDBC连接数据库

JDBC驱动自取点：
链接：https://pan.baidu.com/s/1G1mfI_EL2NUBJvu75qxSLA
提取码：call

JDBC连接的工具类

(记得修改数据库名和密码哦)

import java.sql.*;

public class JDBCUtil {
    private final static String URL = "jdbc:mysql://localhost:3306/china?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC";
    private final static String USER = "root";//数据库账号
    private final static String PASSWORD = "root";//数据库密码

    private JDBCUtil() {
    }

    //加载驱动
    static {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
    public static Connection getConnection() throws SQLException {
        Connection connection = DriverManager.getConnection(URL,USER,PASSWORD);
        return connection;
    }
    public static void close(Connection connection, PreparedStatement preparedStatement, ResultSet resultSet){
        if (resultSet != null) {
            try {
                resultSet.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if (preparedStatement != null) {
            try {
                preparedStatement.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if (connection != null) {
            try {
                connection.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
    }
}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

---

JDBC请求省份数据：
数据库查询：创建一个ChinaServlet类

import com.fasterxml.jackson.databind.ObjectMapper;
import com.situ.web.pojo.Province;
import com.situ.web.util.JDBCUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/china")
public class ChinaServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         //获取url中拼接的数据method
         String method = req.getParameter("method");
         switch (method){
             case "selectProvince":
                 selectProvince(req,resp);
                 break;
             default:
                 System.out.println("乌拉");
                 break;
         }


    }

    private void selectProvince(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        Connection connection = null;
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;
        List<Province> list = new ArrayList<>();
        try {
            connection = JDBCUtil.getConnection();
            String sql = "select id,province from tm_province";
            preparedStatement = connection.prepareStatement(sql);
            System.out.println(preparedStatement);
            resultSet = preparedStatement.executeQuery();
            while(resultSet.next()){
                int id = resultSet.getInt("id");
                String provinceName = resultSet.getString("province");
                Province province = new Province(id,provinceName);
                list.add(province);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            JDBCUtil.close(connection,preparedStatement,resultSet);
        }
        resp.setContentType("text/html;charset=utf-8");
        ObjectMapper objectMapper = new ObjectMapper();
        //json格式返回浏览器
        objectMapper.writeValue(resp.getWriter(),list);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

这里做完就可以看到我们的数据啦：

---

接下来就是遍历取出（将我们的回调函数进行修改，刚才只是打印数据，现在是对标签进行遍历拼接）：

做完之后就有效果啦！！

五：省市联动

1.给province的select标签绑定change事件（改变就会触发）

第一步当然是写请求啦：

2.然后写我们的City查询：

3.查询语句：

做完就又有数据啦：

4.然后就是完善回调函数，拼接标签啦：

5.最后展示效果：

最后就是市区联动了：

1：给市的下拉选择框加change()事件：（一旦选中某个市就去查找该市中区县信息，返回回调函数中）

2：JDBC请求区县数据库数据：

    private void selectArea(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        Connection connection = null;
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;
        List<Area> list = new ArrayList<>();
        String cityId = req.getParameter("cityID");
        Integer ID = Integer.parseInt(cityId);
        try {
            connection = JDBCUtil.getConnection();
            String sql = "select id,area from tm_area where city_id=?";
            preparedStatement = connection.prepareStatement(sql);
            preparedStatement.setInt(1,ID);
            System.out.println(preparedStatement);
            resultSet = preparedStatement.executeQuery();
            while(resultSet.next()){
                int id = resultSet.getInt("id");
                String areaName = resultSet.getString("area");
                Area area = new Area(id,areaName,ID);
                list.add(area);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            JDBCUtil.close(connection,preparedStatement,resultSet);
        }
        resp.setContentType("text/html;charset=utf-8");
        ObjectMapper objectMapper = new ObjectMapper();
        objectMapper.writeValue(resp.getWriter(),list);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3.结束：