Provincial and urban three-level linkage (simple and perfect)

First of all, we need the information of provinces and cities all over the country , Specifically, use your hands ：

link ：https://pan.baidu.com/s/1ofVkyJgGNG0QNSCDJan3AA
Extraction code ：call
At the same time, I would like to thank the eldest brother on the station for providing information about provinces and cities , I don't know the year of the above , If you need, please visit brother's Library , Links are as follows ：
Three level linkage data source ： You can download the sorted administrative division data of cities, provinces, districts, counties and towns in my library + Coordinate vector boundary geofencing (sql、geojson、shp), This library will be maintained for a long time , Multi level linkage 、echarts Test example : https://xiangyuecn.gitee.io/areacity-jsspider-statsgov/

Specifically

One ： establish jsp file ：

1. We create a jsp file , Call china.jsp Well ：

In this way, there is a simple style ！

Two ： Request data for provinces

jQuery The bag takes its own point ：（ Remember to introduce ）
link ：https://pan.baidu.com/s/1rYWsx653xIHX1r_r9NBEuw
Extraction code ：call

3、 ... and ： Provincial and urban pojo class

establish pojo class ：Province,City,Area.（ It is used to encapsulate data , Everybody knows. ）


（ The picture is not cut completely , use IDEA Self contained getter and setter Make it up by yourself , This is not nanny teaching ）

Four ：JDBC Connect to database

JDBC Connected tool class

( Remember to change the database name and password )

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() {
    
    }

    // The load driver 
    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();
            }
        }
    }
}

JDBC Request province data ：

Database query ： Create a ChinaServlet class

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 {
    
         // obtain url Data spliced in method
         String method = req.getParameter("method");
         switch (method){
    
             case "selectProvince":
                 selectProvince(req,resp);
                 break;
             default:
                 System.out.println(" Wula ");
                 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 Format return to browser 
        objectMapper.writeValue(resp.getWriter(),list);
    }
}

After that, you can see our data ：

The next step is to traverse and extract （ Modify our callback function , Just printing data , Now it's time to iterate and splice the tags ）：

After that, it will be effective ！！

5、 ... and ： Provincial and municipal linkage

to province Of select Tag binding change event （ Change triggers ）

The first step, of course, is to write a request ：

Then write our City Inquire about ：

Query statement ：

After that, there will be data again ：

Then it is to improve the callback function , Splice labels ：

Finally, show the effect ：

Zone linked bloggers are too lazy to move , Do it yourself , Be your homework .