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="${dizhi.id}">
														${dizhi.name}
													</option>
												</c:forEach>
											</select> <font color="red">*</font>
										</td>
										<td>
											区
										</td>
										
										<td>
											<!-- 当主持地址变化时,此下拉框发生级联-->
											<select class="combox" name="registeredAddressTown"
												id="registeredAddressTown">
										</td>

									</tr>


 

上面的代码是两个下拉框的代码,第一个下拉框采用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='"+names+"'>"+names+"</option>");
	     		}
		}
	})
}



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就实现了下拉菜单的级联的效果。关于级联实现的方式有多种,不过其原理都是一样的,掌握了一种,其它的也就都掌握了。



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。