java web mysql ajax省份城市二级联动

这个问题涉及到前端、后端和数据库的知识，需要分步骤来实现。

1. 前端部分：

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

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

2. 后端部分：

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

3. 数据库部分：

创建两个表，一个用于存储省份数据，一个用于存储城市数据。在省份表中，包含省份的 id 和名称；在城市表中，包含城市的 id、名称和所属省份的 id。然后，通过 SQL 语句实现省份和城市数据的查询。

最后，将前端、后端和数据库部分整合起来，就可以实现省份城市二级联动了。

相关问题

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 页面，即可实现省份城市二级联动功能。