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

thinkphp5+mysql 二表实现二级联动

二级联动通常是指在网页中选择一个父级选项后，子级选项中只出现与父级相关的选项，以此实现筛选和筛选结果的过滤。ThinkPHP5作为一款常用的PHP框架，可以轻松实现二级联动功能。二级联动一般采用MySQL数据库中的两个表，一个存储父级选项，另一个存储子级选项。下面是如何使用ThinkPHP5和MySQL实现二级联动的步骤：

1. 创建两个MySQL表格，一个存储父级选项，一个存储子级选项，一般使用"id","name"等字段表示内容。

2. 编写ThinkPHP5中的控制器文件，从父级选项中获取所有内容，查询数据库，并将其传递给视图文件。

3. 在视图文件中，使用HTML和JavaScript编写页面并挂载到相应的控制器文件中。使用JavaScript分别获取父级选项和子级选项的DOM元素，并定义函数来控制它们。

4. 在JavaScript函数中，使用AJAX请求从服务器查询子级选项，传递给成功的回调函数处理，将结果显示在子级选项下拉列表中。

5. 完成以上步骤后，在ThinkPHP5应用程序中直接打开相应的URL，就可以看到已经成功实现的二级联动功能了。

总之，使用ThinkPHP5和MySQL可以轻松实现二级联动功能。开发人员只需按照以上步骤进行操作，并根据需要自定义相关功能即可。