SSM +Maven 实现三级联动无刷新

最新推荐文章于 2026-02-19 02:57:12 发布

原创最新推荐文章于 2026-02-19 02:57:12 发布 · 4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#java #maven #无刷新 SSM 三级联动

maven 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何结合Spring、SpringMVC和MyBatis（SSM）以及Maven，实现一个三级联动的效果，该效果在用户选择时无需页面刷新即可完成数据的动态更新。

java代码：

package com.cn.liuweiying.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.annotation.Resource;
import javax.json.JsonArray;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

import com.alibaba.fastjson.JSONObject;
import com.cn.liuweiying.bean.One;
import com.cn.liuweiying.bean.Three;
import com.cn.liuweiying.bean.Two;
import com.cn.liuweiying.service.OneService;

import net.sf.json.JSONArray;

@Controller
@RequestMapping("/lian")
public class LianController {
	protected static Logger logger = Logger.getLogger(LianController.class);
	@Resource
	private OneService oneService;

	@RequestMapping(params = "ToOne", method = { RequestMethod.POST, RequestMethod.GET })
	public ModelAndView ToOne(HttpServletRequest request,HttpServletResponse response) throws IOException {
		ModelAndView view = new ModelAndView();
	
		response.setCharacterEncoding("UTF-8");
		JSONArray jsonarray = null;
		// 查询所有的一级
		List<One> onelist = oneService.findOneAll();
		jsonarray = JSONArray.fromObject(onelist);
		PrintWriter out = response.getWriter();
		out.print(jsonarray.toString());
		out.flush();
		out.close();
		view.addObject("onelist", onelist);
		view.setViewName("lian");
		return view;

	}

	// 获得一级父id获取二级
	@RequestMapping(params = "ToTwo", method = { RequestMethod.POST, RequestMethod.GET })
	public ModelAndView ToTwo(HttpServletRequest request,HttpServletResponse response,Integer one) throws IOException {
		ModelAndView view = new ModelAndView();
		//JSONObject jsonObject = new JSONObject();
		response.setCharacterEncoding("UTF-8");
		JSONArray jsonarray = null;
		One one1 = oneService.selectByPrimaryKeyOne(one);
		int oneid = one1.getOneid();
		List<Two> twolist = oneService.findTwoByFaterid(oneid);
		jsonarray = JSONArray.fromObject(twolist);
		PrintWriter out = response.getWriter();
		out.print(jsonarray.toString());
		out.flush();
		out.close();
		view.addObject("twolist", twolist);
		view.setViewName("lian");
		return view;

	}

	// 获得二级父id获得三级
	@RequestMapping(params = "ToThree",  method = { RequestMethod.POST, RequestMethod.GET })
	public ModelAndView ToThree(HttpServletRequest request,HttpServletResponse response,Integer two) throws IOException {
		ModelAndView view = new ModelAndView();
		response.setCharacterEncoding("UTF-8");
		JSONArray jsonarray = null;
		Two two1 = oneService.selectByPrimaryKeybyTwo(two);
		int twoid = two1.getTwoid();
		List<Three> threelist = oneService.findThreeByFaterid(twoid);
		jsonarray = JSONArray.fromObject(threelist);
		PrintWriter out = response.getWriter();
		out.print(jsonarray.toString());
		out.flush();
		out.close();
		view.addObject("threelist", threelist);
		view.setViewName("lian");
		return view;
	}

}

jsp代码：

<%@ page language="java" contentType="text/html; charset=utf-8"
	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 + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
 <script type="text/javascript">
$().ready(function(){
	  alert("开始")
	  $.post("lian.do?ToOne",function(data){
         alert(data)          
          var dataObj=eval("("+data+")");
		   for(var i=0;i<dataObj.length;i++){
		   	  var $option=$("<option></option>");
			  $option.attr("value",dataObj[i].oneid);
			  $option.text(dataObj[i].onename);
			  $("#one").append($option);
			  
		   }
	  });	
	  

/********************************************************************************************************/
    //一级引起二级的变化
	 $("#one").change(function(){
		var jsonObj={
			oneid:$(this).val()
		}
		
		//删除二级下所有的下拉选,保留<option value="">请选择.....</option>
		$("#two option[value!='']").remove();
		
	    //删除三级下所有的下拉选保留<option value="">请选择.....</option>
		$("#three option[value!='']").remove();
		
		
		
		
	   $.post("lian.do?one="+$("#one").val()+"&ToTwo",jsonObj,function(data,textStatus){
		
		   var dataObj=eval("("+data+")");		 
		   for(var i=0;i<dataObj.length;i++){
		   	  var $option=$("<option></option>");
			  $option.attr("value",dataObj[i].twoid);
			  $option.text(dataObj[i].twoname);
			  $("#two").append($option);
			 
		   }
			
	   });
	 });
	 

/********************************************************************************************************/
   //二级引起三级的变化
   $("#two").change(function(){
		var jsonObj={
			twoid:$(this).val()
		} 
		
		//删除三级下所有的下拉选保留<option value="">请选择.....</option>
		$("#three option[value!='']").remove();
		
		$.post("lian.do?two="+$("#two").val()+"&ToThree",jsonObj,function(data,textStatus){
			 var dataObj=eval("("+data+")");		 
		     for(var i=0;i<dataObj.length;i++){
		   	    var $option=$("<option></option>");
			    $option.attr("value",dataObj[i].threeid);
			    $option.text(dataObj[i].threename);
			    $("#three").append($option);
			
		   }
		}); 
		

	});	 
/********************************************************************************************************/			  
	});

</script>  



<title>Insert title here</title>
</head>
<body>
	<h3 style="color: red" align="center">${message }</h3>
	<select class="form-control" id="one" name="one">
			<option value="${one.oneid==null?'':one.oneid}" selected>
				${one.onename==null?"请选择...":one.onename}</option>
	</select>

	<select class="form-control" id="two" name="two">
		<option value="${two.twoid==null?'':two.twoid}">${two.twoname==null?"请选择...":two.twoname}</option>
	</select>


	<select class="form-control" id="three" name="three">
		<option value="${three.threeid==null?'':three.threeid}">${three.threename==null?"请选择...":three.threename}</option>
	</select>



</body>
</html>

效果展示截图：