spring+jquery+jdbc用ajax做多级下拉框_jdbc 下拉框-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_36027383/article/details/103905558

本文详细介绍如何使用Spring框架和JdbcTemplate实现省市县三级联动的数据获取与展示，涵盖pom.xml配置、实体类定义、DAO层实现、Service层处理、Controller层响应及HTML页面与JS交互，适用于Web应用中地区选择的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先在pom.xml加上数据库用的jdbc 我这里以sqlserver为例

		<dependency>
			<groupId>com.microsoft.sqlserver</groupId>
			<artifactId>mssql-jdbc</artifactId>
			<scope>runtime</scope>
		</dependency>

实体类一共3个分别是省市县
Pro 变量是 pro_id和pro_name
City的变量是city_id和city_name
Conn的变量是conn_id 和conn_name

2.service的实现

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
import org.springframework.stereotype.Repository;

import com.sinqi.bo.City;
import com.sinqi.bo.Conn;
import com.sinqi.bo.Pro;


@Repository
public class GatDataDao {

	@Autowired
	JdbcTemplate mssql ;

	public List<Pro> getPro(){
		RowMapper<Pro> map_pro = new BeanPropertyRowMapper<Pro>(Pro.class);
		String sql = "获取省份的sql语句'";
		List<Pro> list_pro = mssql.query(sql,map_pro);
		return list_pro;
	}
	
	public List<City> getCity(String pro_id){
		RowMapper<City> map_city = new BeanPropertyRowMapper<City>(City.class);
		String sql = "根据省份获取城市的sql语句"+ "pro_id" ;
		List<City> list_city = mssql.query(sql,map_city);
		return list_city;
	}
	
	public List<Conn> getConn(String city_id){
		RowMapper<Conn> map_conn = new BeanPropertyRowMapper<Conn>(Conn.class);
		String sql = "根据城市获取县区的sql语句"+"city_id";
		List<Conn> list_conn = mssql.query(sql, map_conn);
		return list_conn ;
	}
	
	
}

3.service层

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.sinqi.bo.City;
import com.sinqi.bo.Conn;
import com.sinqi.bo.Pro;
import com.sinqi.dao.GatDataDao;

@Service
public class GatDataService {

	@Autowired
	GatDataDao dao ;
	
	public List<Pro> getPro(){
		return dao.getPro();
	}
	public List<City> getCity(String pro_id){
		return dao.getCity(pro_id);
	}
	public List<Conn> getConn(String city_id){
		return dao.getConn(city_id);
	}
	
}

4.写 controller

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.sinqi.bo.City;
import com.sinqi.bo.Conn;
import com.sinqi.bo.Pro;
import com.sinqi.service.GatDataService;

@Controller
public class maincontroller {

	@Autowired
	GatDataService service ;
	//获取省
	@RequestMapping(value="/get_pro",method= {RequestMethod.GET ,RequestMethod.POST})
	@ResponseBody
	public List<Pro> get_pro (){
		List<Pro> list_pro = service.getPro();
		return list_pro;
	}
	//根据省份获取城市
	@RequestMapping(value="/get_city",method= {RequestMethod.GET ,RequestMethod.POST})
	@ResponseBody
	public List<City> get_city(String pro_id){
		List<City> list_city = service.getCity(pro_id);
		return list_city ;
	}
	//根据城市获取县区
	@RequestMapping(value="/get_conn",method={RequestMethod.GET ,RequestMethod.POST})
	@ResponseBody
	public List<Conn> get_conn(String city_id){
		List<Conn> list_conn = service.getConn(city_id);
		return list_conn;
	}
	
	@RequestMapping(value="/index",method={RequestMethod.GET ,RequestMethod.POST})
	public String index(Model model) {
		List<Pro> list_pro = get_pro(); //上来就先列出省份因为是一级列表
		model.addAttribute("list_pro", list_pro);
		return "/index";
	}
}

5.写html页面

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en">
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>
<body ms-controller="idcard">
	<select onchange="getcity()" id="pro" name="pro">
		<option value="0">---选择---</option>	
		<option th:each="pro : ${list_pro}" 
		th:value="${pro.pro_id}" 
		th:text="${pro.pro_name}"
		></option>
	</select>
	<select onchange="getconn()" id="city" name="city">
		<option value="">---选择---</option>	
	</select>
	<select id="conn" name="conn">
		<option value="">---选择---</option>	
	</select>
</body>
<script type="text/javascript" src="ajaxs/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="ajaxs/js/myscript2.js"></script> 
</html>

6.写个js俩方法一个是获取城市一个获取县区

	function getcity(){
		var pro_id= $("#pro").val();
		$("#city").empty();
		$("#conn").empty();
		$.ajax({
            url: "/get_city",
            type: "post",
            data: {"pro_id":pro_id},
            success:function(data){
                for(var i=0;i<data.length ; i++){
                	var cit ="<option value="+data[i].city_id+">"+data[i].city_name+"</option>";
					$("#city").append(cit);
                }
            }
        })
	}
	function getconn(){
		var pro_id= $("#city").val();
		$("#conn").empty();
		$.ajax({
            url: "/get_conn",
            type: "post",
            data: {"city_id":pro_id},
            success:function(data){
                for(var i=0;i<data.length ; i++){
                   // alert(data[i].city_id);
                	var cit ="<option value="+data[i].conn_id+">"+data[i].conn_name+"</option>";
					$("#conn").append(cit);
                }
            }
        })
	}