Ajax省市联动前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax省市联动</title>
<script type="text/javascript" src="/ajax/js/jquery-3.4.1.js"></script>
</head>
<body>
<script type="text/javascript">
// 页面加载完成发送ajax请求查询省份
$(function (){
$.ajax({
type : "GET",
url : "/ajax/ajaxSS",
data : "_=" + new Date().getTime(),
dataType : "json",
success : function (json){
/*var html = "<option selected disabled>--请选择省--</option>";
for (var i = 0; i < json.length; i++) {
var area = json[i]
html += "<option value=\""+area.code+"\">"+area.name+"</option>";
}
$("#area").html(html)*/
$.each(json,function (index,value){
$("#area").append("<option value=\""+value.code+"\">"+value.name+"</option>")
})
}
})
// 当省份改变的时候发送ajax请求改变相应的市
$("#area").change(function (){
$.ajax({
type : "GET",
url : "/ajax/ajaxSS",
data : "_=" + new Date().getTime() + "&pcode=" + this.value,
dataType : "json",
success : function (json){
/*var html = "<option selected disabled>--请选择市--</option>";
for (var i = 0; i < json.length; i++) {
var area = json[i]
html += "<option value=\""+area.code+"\">"+area.name+"</option>";
}v
$("#city").html(html)*/
$("#city").empty()
$("#city").append("<option selected disabled>--请选择市--</option>")
$.each(json,function (index,value){
$("#city").append("<option value=\""+value.code+"\">"+value.name+"</option>")
})
}
})
})
// 获取下拉列表的文本值
/*$("#area").change(function (){
// 获取选中的下拉列表项
var $area_option_selection = $("#area>option:selected");
console.log("选中的value值：" + $area_option_selection.val() +"," + "选中的文本值为：" + $area_option_selection.text())
})
$("#city").change(function (){
// 获取选中的下拉列表项
var $city_option_selection = $("#city>option:selected");
console.log("选中的value值：" + $city_option_selection.val() +"," + "选中的文本值为：" + $city_option_selection.text())
})*/
})
</script>
<select id="area">
<!--<option selected disabled>--请选择省--</option>
<option value="001">河南省</option>
<option value="002">河北省</option>-->
<option selected disabled>--请选择省--</option>
</select>
<select id="city">
<option selected disabled>--请选择市--</option>
</select>
</body>
</html>
Ajax省市联动后端代码
package jQuery.web;
import bean.Area;
import com.alibaba.fastjson.JSON;
import utils.DBUtil;
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("/ajaxSS")
public class ajaxSSServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
// 存放json字符串
List<Area> areaList = new ArrayList<>();
try {
conn = DBUtil.getConnection();
String pcode = request.getParameter("pcode");
String sql = null;
if (pcode == null){
sql = "select code,name from t_area where pcode is null";
ps = conn.prepareStatement(sql);
}else {
sql = "select code,name from t_area where pcode = ?";
ps = conn.prepareStatement(sql);
ps.setString(1,pcode);
}
rs = ps.executeQuery();
while (rs.next()){
String code = rs.getString("code");
String name = rs.getString("name");
Area a = new Area(code, name);
areaList.add(a);
}
} catch (SQLException e) {
e.printStackTrace();
}
finally {
DBUtil.close(conn,ps,rs);
}
// 后端响应json字符串
String json = JSON.toJSONString(areaList);
response.getWriter().print(json);
}
}
使用的工具类以及数据库表
package utils;
import java.sql.*;
import java.util.ResourceBundle;
/*
连接数据库的工具类
*/
public class DBUtil {
private static ResourceBundle bundle = ResourceBundle.getBundle("resources.jdbc");
private static String driver = bundle.getString("driver");
private static String url = bundle.getString("url");
private static String user = bundle.getString("user");
private static String password = bundle.getString("password");
static {
// 注册驱动
try {
Class.forName(driver);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
// 获取连接
public static Connection getConnection() throws SQLException {
Connection conn = DriverManager.getConnection(url,user,password);
return conn;
}
// 释放资源
public static void close(Connection conn, PreparedStatement ps, ResultSet rs){
if (rs != null){
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (ps != null){
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
CREATE TABLE `t_area` (
`id` int(10) NOT NULL AUTO_INCREMENT COMMENT 'id',
`code` varchar(255) DEFAULT NULL COMMENT 'code值（为null说明是省）',
`name` varchar(255) DEFAULT NULL COMMENT '省市名称',
`pcode` varchar(10) DEFAULT NULL COMMENT '父code值',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8
使用的实体类
package bean;
/*
Area的实体类
*/
public class Area {
private String code;
private String name;
public Area() {
}
public Area(String code, String name) {
this.code = code;
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
浙公网安备 33010602011771号