首页 > 代码库 > Java SSH 项目总结——Ajax+Json 级联菜单
Java SSH 项目总结——Ajax+Json 级联菜单
前言
前台JSP页面需要实现下拉菜单的级联效果,实现方式如题,采用Ajax+Json,分享下实现过程。
正题
先看下效果图:
前台
<tr> <td> 注册地址 <!-- registeredAddressSection --> </td> <td> <select class="combox" id="zhuceid" name="zhuceid" onchange="getzhuceid()"> <c:forEach var="dizhi" items="${dtdizhi}"> <option id="${dizhi.id}" <c:if test="${dizhi.id==zhuceid}">selected="selected"</c:if> value=http://www.mamicode.com/"${dizhi.id}">>
上面的代码是两个下拉框的代码,第一个下拉框采用jstl将后台的具体的list地址信息进行加载,当第一个下拉框发生变化时会触发onchange="getzhuceid()"事件
js中方法
function getzhuceid() { $("#registeredAddressTown").empty();//清空 var zhuceid = document.getElementById("zhuceid").value; var url = "public_qu2zhen.action?quid=" + zhuceid; $.ajax( { type : "POST", url : url, data : {}, dataType : "JSON", success : function(data) { //data为后台返回的Json信息 for(var n=0;n<data.length;n++){ var ids=data[n].id; var names=data[n].name; $("#registeredAddressTown").append("<option id='"+ids+"' value=http://www.mamicode.com/'"+names+"'>"+names+"");>
getzhuceid通过得到当前注册地址的ID,然后将该ID传到action类,然后去数据库中拿到该注册地址下的所有地址,通过json形式进行返还,然后将json加载到第二个下拉菜单中,以实现级联的效果。
Action方法
// 注册地址:区->镇 public void qu2zhen() { List<Dictionary> dictionaries = new ArrayList<Dictionary>(); try { // 1.6注册地址/经营地址 String quid = request.getParameter("quid").trim(); List qu2zhen = testService.findListDictionaries(quid); ActionContext.getContext().put("qu2zhen", qu2zhen); dictionaries = objectToModel(qu2zhen); } catch (Exception e) { e.printStackTrace(); } String result = JsonUtils.toJson(dictionaries); //打印转化出来的json System.out.println(result); //[{"id":71,"name":"东华门街道"},{"id":72,"name":"景山街道"},{"id":73,"name":"交道口街道"},{"id":74,"name":"安定门街道"},{"id":75,"name":"北新桥街道"},{"id":76,"name":"东四街道"},{"id":77,"name":"朝阳门街道"},{"id":78,"name":"建国门街道"},{"id":79,"name":"东直门街道"},{"id":80,"name":"和平里街道"},{"id":81,"name":"前门街道"},{"id":82,"name":"崇文门外街道"},{"id":83,"name":"东花市街道"},{"id":84,"name":"龙潭街道"},{"id":85,"name":"体育馆路街道"},{"id":86,"name":"天坛街道"},{"id":87,"name":"永定门外街道"}] outPrint(response, result); }上面的代码就比较简单了,在方法中得到前台传过来的id,然后调用service方法拿到该id下的所有list实体集合,然后将list集合转化为了json,我们同时将Json打印了出来。这里的Json转化正是上一篇文章中,拓展中介绍的将list集合转化为json对象的方法。
小结
这样就利用Ajax+json就实现了下拉菜单的级联的效果。关于级联实现的方式有多种,不过其原理都是一样的,掌握了一种,其它的也就都掌握了。
Java SSH 项目总结——Ajax+Json 级联菜单
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。