spring boot 三级联动_springboot 实现三级联动-CSDN博客

本文链接：https://blog.csdn.net/IT_cpx/article/details/88190548

本文介绍了如何在Spring Boot项目中实现三级联动效果，包括jsp页面的设计、后台Controller的处理以及Mapper接口的实现，同时涉及到数据库表t_city、t_area和t_bookshop的结构和使用。

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

jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
  <title>My JSP 'list.jsp' starting page</title>
  <link rel="stylesheet" href="<%=path%>/css/index_work.css"></link>
  <script type="text/javascript" src="<%=path%>/js/jquery-1.7.js"></script></head>
  <script type="text/javascript">
  	$(function(){
  		$.post(
  			"findCity",
  			{},
  			function(data){
  				for (var i = 0; i < data.length; i++) {
					$("#city").append("<option value='"+data[i].cid+"'>"+data[i].cname+"</option>")
				}
  			}
  		)
  	})
  	function cha(){
  		var cid = $("#city").val();
  		alert(cid);
  		$.post(
  	  			"findArea",
  	  			{cid:cid},
  	  			function(data){
  	  				$("#area").empty();
  	  				for (var i = 0; i < data.length; i++) {
  						$("#area").append("<option value='"+data[i].aid+"'>"+data[i].aname+"</option>")
  					}
  	  			}
  	  		)
  	}
  	function chaa(){
  		var aid = $("#area").val();
  		alert(aid);
  		$.post(
  	  			"findShop",
  	  			{aid:aid},
  	  			function(data){
  	  				$("#shop").empty();
  	  				for (var i = 0; i < data.length; i++) {
  						$("#shop").append("<option value='"+data[i].sid+"'>"+data[i].sname+"</option>")
  					}
  	  			}
  	  		)
  	}
  	
  	function add(){
  		$.post(
  				"<%=path%>/addBook",
				$("form").serialize(),
				function(data){
					if(data){
						alert("添加成功");
						location="<%=path%>/list";
					}else{
						alert("添加成功");
					}
				},"json"
  		)
  	}
  </script>
  <body>
		<form action="addBook" method="post">
		<table>
			
				<tr>
					<td>城市
						<select id="city" onchange="cha()" name="cid">
							<option value="0">-请选择城市-</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>地区
						<select id="area" onchange="chaa()" name="aid">
						</select>
					</td>
				</tr>
				<tr>
					<td>书店名称
						<select id="shop" onchange="" name="sid">
						</select>
					</td>
				</tr>
				<tr>
					<td>
						书名:<input type="text" name="bname">
					</td>
				</tr>
				<tr>
					<td>
						数量:<input type="text" name="count">
					</td>
				</tr>
				<tr>
					<td>
						状态:
						<select name="state">
							<option value="上架">上架</option>
							<option value="下架">下架</option>
						</select>
					</td>
				</tr>
				<tr>
					<td><input type="button" value="创建" onclick="add()"></td>
			</tr>
		</table>
		</form>
  </body>
</html>

controller

	//一级联动城市
@RequestMapping("findCity")
@ResponseBody
public List<City> findCity(){
	return service.findCity();
}
	//二级联动地区
@RequestMapping("findArea")
@ResponseBody
public List<Area> findArea(Integer cid) {
	List<Area> list = service.findArea(cid);
	return list;
}

	//三级联动
@RequestMapping("findShop")
@ResponseBody
public List<Shop> findShop(Integer aid){
	
	return service.findShop(aid);
}

mapper

public interface BookDao {
@Select("SELECT * FROM t_area WHERE cid IN(#{cid})")
List<Area> findArea(@Param("cid")Integer cid);
@Select("select * from t_city")
List<City> findCity();
@Select("select * from t_bookshop where aid in(#{aid})")
List<Shop> findShop(@Param("aid")Integer aid);