现在通过json和gson来实现完成一个级联下拉列表框(例如:省市联动)
1、前台jsp页面:
<select name="address.upLeverId" id="Townside1"> <span style="white-space:pre"> </span><option value="-1">请选择</option> <s:iterator value="#request.addresses" id="area"> <option value="${id}" >${addressName}</option> </s:iterator> </select> <select name="address.id" id="thecountrysides1"> </select>
2、前台js实现:
<script type="text/javascript" src="<%=path%>/js/jquery-1.9.1.min.js"> </script>
<script type="text/javascript" > $(document).ready(function(){ /** * 选择区域 */ $("#Townside1").change(function(){ var $countrysides = $("#thecountrysides1"); var $this = $(this); $.ajax( { type : "POST", url: "Commodity_getcountrysides.do", data:"address.id="+$this.val(), dataType : "json", contentType : "application/x-www-form-urlencoded ; charset=UTF-8",// 解决传递中文乱码的问题 success : function(msg) { $countrysides.empty(); $countrysides.append("<option selected='selected' value='-1'>请选择</option>"); if(msg.status == 1){ //"全部"的"value"属性值应为"",与js校验相对应 $.each(msg.countrysides,function(index,item){ $("<option>",{"value":item.id,"text":item.addressName}).appendTo($countrysides); }); } } }); }); }); </script>
3、后台java实现代码:
public void getcountrysides(){ try { JSONObject jsonObject = new JSONObject(); Gson gson = new Gson(); if(null !=address && null!=address.getId()){ //查询地区 List<DAddress> addresses= addressService.query(address.getId());(这个是根据前台传来的第一级地区来获取它下一级的数据) //返回浏览器 if(null !=addresses && !addresses.isEmpty()){ System.out.println("gson.toJson(addresses:"+gson.toJson(addresses));(通过这个方式可以看出集合数据,这个也是gson的一大优势) jsonObject.accumulate("countrysides", gson.toJson(addresses)); jsonObject.accumulate(RETRUEN_STATUS, SUCCESS_STATUS); }else{ jsonObject.accumulate(RETRUEN_STATUS, ERROR_STATUS); } }else{ jsonObject.accumulate(RETRUEN_STATUS, ERROR_STATUS); } System.out.println("jsonObject.toString():"+jsonObject.toString()); outPrint(jsonObject.toString());(最钟还是要传输json格式数据,前台可以很方便的通过msg获取数据) } catch (Exception e) { // TODO: handle exception e.printStackTrace(); } }
时间: 2024-10-12 23:52:25