当前位置:网站首页>省市区三级联动(简单又完美)
省市区三级联动(简单又完美)
2022-07-29 05:09:00 【小洪正在努力】
那么首先我们需要全国各地的省市区信息,具体自己动动小手:
链接:https://pan.baidu.com/s/1ofVkyJgGNG0QNSCDJan3AA
提取码:call
同时感谢站上的大哥提供的省市区信息,上面的不知道是哪一年的,若有需要请访问大哥的库,链接如下:
三级联动的数据源:可以到我的库里面下载整理好的省市区县乡镇行政区划数据+坐标矢量边界地理围栏(sql、geojson、shp),这个库会长期维护,多级联动、echarts测试例子: https://xiangyuecn.gitee.io/areacity-jsspider-statsgov/
具体
一:创建jsp文件:
1.我们创建一个jsp文件,就叫china.jsp吧:
这样就有了简单的样式啦!
二:请求省份的数据
jQuery包自取点:(记得引入哦)
链接:https://pan.baidu.com/s/1rYWsx653xIHX1r_r9NBEuw
提取码:call
三:省市区的pojo类
创建pojo类:Province,City,Area。(就是封装数据用的,大家懂的)
(图没截全,用IDEA自带的getter and setter自行补齐吧,这里不是保姆教学哦)
四:JDBC连接数据库
JDBC连接的工具类
(记得修改数据库名和密码哦)
import java.sql.*;
public class JDBCUtil {
private final static String URL = "jdbc:mysql://localhost:3306/china?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC";
private final static String USER = "root";
private final static String PASSWORD = "root";
private JDBCUtil() {
}
//加载驱动
static {
try {
Class.forName("com.mysql.cj.jdbc.Driver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
public static Connection getConnection() throws SQLException {
Connection connection = DriverManager.getConnection(URL,USER,PASSWORD);
return connection;
}
public static void close(Connection connection, PreparedStatement preparedStatement, ResultSet resultSet){
if (resultSet != null) {
try {
resultSet.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (preparedStatement != null) {
try {
preparedStatement.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (connection != null) {
try {
connection.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}
}
JDBC请求省份数据:
数据库查询:创建一个ChinaServlet类
import com.fasterxml.jackson.databind.ObjectMapper;
import com.situ.web.pojo.Province;
import com.situ.web.util.JDBCUtil;
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("/china")
public class ChinaServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取url中拼接的数据method
String method = req.getParameter("method");
switch (method){
case "selectProvince":
selectProvince(req,resp);
break;
default:
System.out.println("乌拉");
break;
}
}
private void selectProvince(HttpServletRequest req, HttpServletResponse resp) throws IOException {
Connection connection = null;
PreparedStatement preparedStatement = null;
ResultSet resultSet = null;
List<Province> list = new ArrayList<>();
try {
connection = JDBCUtil.getConnection();
String sql = "select id,province from tm_province";
preparedStatement = connection.prepareStatement(sql);
System.out.println(preparedStatement);
resultSet = preparedStatement.executeQuery();
while(resultSet.next()){
int id = resultSet.getInt("id");
String provinceName = resultSet.getString("province");
Province province = new Province(id,provinceName);
list.add(province);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}finally {
JDBCUtil.close(connection,preparedStatement,resultSet);
}
resp.setContentType("text/html;charset=utf-8");
ObjectMapper objectMapper = new ObjectMapper();
//json格式返回浏览器
objectMapper.writeValue(resp.getWriter(),list);
}
}
这里做完就可以看到我们的数据啦:
接下来就是遍历取出(将我们的回调函数进行修改,刚才只是打印数据,现在是对标签进行遍历拼接):
做完之后就有效果啦!!
五:省市联动
给province的select标签绑定change事件(改变就会触发)
第一步当然是写请求啦:
然后写我们的City查询:
查询语句:
做完就又有数据啦:
然后就是完善回调函数,拼接标签啦:
最后展示效果:
区联动博主懒得动了,自行完成,当作业吧。
边栏推荐
猜你喜欢
How mongodb inserts, deletes and updates documents
Webrtc audio anti weak network technology (Part 2)
321,京东言犀×NLPCC 2022挑战赛开赛!
365 day challenge leetcode 1000 questions - day 039 full binary tree inserter + find peak II + snapshot array
法线可视化
C语言函数实现输出I love you
vim编辑器使用
Vs code的安装步骤及环境配置
More than 200 ISVs have settled in! The first anniversary of Alibaba cloud computing nest
Cmu15-213 malloc lab experiment record
随机推荐
预约中,2022京东云产业融合新品发布会线上开启
哈夫曼树以及哈夫曼编码在文件压缩上的应用
京东云金秋上云特惠进行中!扫码参与活动
最新坦克大战2022-全程开发笔记-1
CryEngine5 Shader调试
With frequent data leakage and deletion events, how should enterprises build a security defense line?
How to get command parameters in Visual Basic.Net
Cryengine5 shader debugging
阿里云张新涛:异构计算为数字经济提供澎湃动力
QML type: mousearea
Thousands of databases, physical machines all over the country, JD logistics full volume cloud live record | interview with excellent technical team
Getting started with arfoundation tutorial 10- plane detection and placement
Yangyonglin, vice president of Rushi Technology: when traditional industries encounter "digital space"
阿里云架构师细说游戏行业九大趋势
C language handwritten qq-ai version
数据泄漏、删除事件频发,企业应如何构建安全防线?
小鲁客栈---预告篇
CMU15-213 Malloc Lab实验记录
How rimworld uploads creative workshops through steamcmd
Xiaolu Inn - Trailer