java web mysql ajax json省份城市二级联动项目，代码实现

以下是一个简单的 Java Web 项目，实现了省份城市二级联动功能。该项目使用了 MySQL 数据库，通过 AJAX 请求获取 JSON 格式的省份和城市数据，然后通过 JavaScript 实现了省份和城市的二级联动。

1. 数据库部分：

创建两个表，一个用于存储省份数据，一个用于存储城市数据。在省份表中，包含省份的 id、名称和编码；在城市表中，包含城市的 id、名称、编码和所属省份的 id。

省份表 SQL 语句：

CREATE TABLE `province` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `code` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

城市表 SQL 语句：

CREATE TABLE `city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `code` varchar(255) NOT NULL,
  `province_id` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `idx_province_id` (`province_id`),
  CONSTRAINT `fk_province_id` FOREIGN KEY (`province_id`) REFERENCES `province` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

2. 后端部分：

创建一个 Java Servlet，用于处理 ajax 请求，并从数据库中获取省份和城市的数据。在 doGet() 方法中，根据请求参数获取对应的省份和城市数据，并将数据以 JSON 格式返回给前端。

ProvinceServlet.java 代码：

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONObject;

public class ProvinceServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    private static final String DB_DRIVER = "com.mysql.jdbc.Driver";
    private static final String DB_URL = "jdbc:mysql://localhost:3306/test";
    private static final String DB_USER = "root";
    private static final String DB_PASSWORD = "root";

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");

        String type = request.getParameter("type");
        if ("province".equals(type)) {
            getProvinces(response);
        } else if ("city".equals(type)) {
            String provinceCode = request.getParameter("provinceCode");
            getCities(response, provinceCode);
        }
    }

    private void getProvinces(HttpServletResponse response) throws IOException {
        Connection conn = null;
        PreparedStatement stmt = null;
        ResultSet rs = null;

        try {
            Class.forName(DB_DRIVER);
            conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD);

            String sql = "SELECT * FROM province";
            stmt = conn.prepareStatement(sql);
            rs = stmt.executeQuery();

            JSONArray provinces = new JSONArray();
            while (rs.next()) {
                JSONObject province = new JSONObject();
                province.put("id", rs.getInt("id"));
                province.put("name", rs.getString("name"));
                province.put("code", rs.getString("code"));
                provinces.put(province);
            }

            PrintWriter out = response.getWriter();
            out.print(provinces);
        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        } finally {
            if (rs != null) {
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (stmt != null) {
                try {
                    stmt.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (conn != null) {
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    private void getCities(HttpServletResponse response, String provinceCode) throws IOException {
        Connection conn = null;
        PreparedStatement stmt = null;
        ResultSet rs = null;

        try {
            Class.forName(DB_DRIVER);
            conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD);

            String sql = "SELECT c.id, c.name, c.code FROM city c JOIN province p ON c.province_id = p.id WHERE p.code = ?";
            stmt = conn.prepareStatement(sql);
            stmt.setString(1, provinceCode);
            rs = stmt.executeQuery();

            JSONArray cities = new JSONArray();
            while (rs.next()) {
                JSONObject city = new JSONObject();
                city.put("id", rs.getInt("id"));
                city.put("name", rs.getString("name"));
                city.put("code", rs.getString("code"));
                cities.put(city);
            }

            PrintWriter out = response.getWriter();
            out.print(cities);
        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        } finally {
            if (rs != null) {
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (stmt != null) {
                try {
                    stmt.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (conn != null) {
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

3. 前端部分：

在 HTML 页面中添加两个 select 标签，一个用于选择省份，一个用于选择城市。给这两个 select 标签分别添加 id，例如：province 和 city。

然后，在 JavaScript 中，通过 ajax 发送请求，获取省份和城市的数据。在省份 select 标签中添加 option 标签，显示所有省份的名称。当用户选择某个省份时，再次发送 ajax 请求，获取该省份下的所有城市，并在城市 select 标签中添加 option 标签，显示所有城市的名称。

index.html 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>省份城市二级联动</title>
</head>
<body>
    <select id="province"></select>
    <select id="city"></select>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(function() {
            // 获取所有省份
            $.ajax({
                url: "ProvinceServlet",
                type: "GET",
                data: {
                    type: "province"
                },
                success: function(data) {
                    // 在省份 select 标签中添加 option 标签
                    for (var i = 0; i < data.length; i++) {
                        var option = $("<option>").val(data[i].code).text(data[i].name);
                        $("#province").append(option);
                    }
                    // 触发省份 select 标签的 change 事件
                    $("#province").trigger("change");
                }
            });

            // 当省份 select 标签的值发生变化时，获取该省份下的所有城市
            $("#province").on("change", function() {
                var provinceCode = $(this).val();
                $.ajax({
                    url: "ProvinceServlet",
                    type: "GET",
                    data: {
                        type: "city",
                        provinceCode: provinceCode
                    },
                    success: function(data) {
                        // 清空城市 select 标签中的 option 标签
                        $("#city").empty();
                        // 在城市 select 标签中添加 option 标签
                        for (var i = 0; i < data.length; i++) {
                            var option = $("<option>").val(data[i].code).text(data[i].name);
                            $("#city").append(option);
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>

4. 部署和运行：

将上述代码保存在一个 Java Web 项目中，将 MySQL 驱动程序添加到项目的 classpath 中，然后部署到 Tomcat 服务器中运行。在浏览器中访问该项目的 index.html 页面，即可实现省份城市二级联动功能。