您的位置：首页 > 编程语言 > Java开发

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

2016-05-24 16:17 411 查看

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>

效果展示截图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： java maven 无刷新 SSM 三级联动

相关文章推荐

新的分享

章节导航

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

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