那么首先我们需要全国各地的省市区信息,具体自己动动小手:
链接: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。(就是封装数据用的,大家懂的)
1.省:
四:JDBC连接数据库
JDBC驱动自取点:
链接:https://pan.baidu.com/s/1G1mfI_EL2NUBJvu75qxSLA
提取码:call
(记得修改数据库名和密码哦)
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);
}
}
接下来就是遍历取出(将我们的回调函数进行修改,刚才只是打印数据,现在是对标签进行遍历拼接):
做完之后就有效果啦!!
五:省市联动
1.给province的select标签绑定change事件(改变就会触发)
第一步当然是写请求啦:
2.然后写我们的City查询:
3.查询语句:
做完就又有数据啦:
4.然后就是完善回调函数,拼接标签啦:
5.最后展示效果:
1:给市的下拉选择框加change()事件:(一旦选中某个市就去查找该市中区县信息,返回回调函数中)
2:JDBC请求区县数据库数据:
private void selectArea(HttpServletRequest req, HttpServletResponse resp) throws IOException {
Connection connection = null;
PreparedStatement preparedStatement = null;
ResultSet resultSet = null;
List<Area> list = new ArrayList<>();
String cityId = req.getParameter("cityID");
Integer ID = Integer.parseInt(cityId);
try {
connection = JDBCUtil.getConnection();
String sql = "select id,area from tm_area where city_id=?";
preparedStatement = connection.prepareStatement(sql);
preparedStatement.setInt(1,ID);
System.out.println(preparedStatement);
resultSet = preparedStatement.executeQuery();
while(resultSet.next()){
int id = resultSet.getInt("id");
String areaName = resultSet.getString("area");
Area area = new Area(id,areaName,ID);
list.add(area);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}finally {
JDBCUtil.close(connection,preparedStatement,resultSet);
}
resp.setContentType("text/html;charset=utf-8");
ObjectMapper objectMapper = new ObjectMapper();
objectMapper.writeValue(resp.getWriter(),list);
}
3.结束: