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

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

数据库部分：

创建两个表，一个用于存储省份数据，一个用于存储城市数据。在省份表中，包含省份的 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;

后端部分：

创建一个 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();
}
}
}
}
}

前端部分：

在 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>

部署和运行：

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