现在通过json和gson来实现完成一个级联下拉列表框

现在通过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><pre name="code" class="java"><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();
		}
		
	}

PS:json、gson 两者的区别和联系

1、 json是一种数据格式,便于数据传输、存储、交换
 gson是一种组件库,可以把java对象数据转换成json数据格式

 Gson可以直接转化成String[]数组,同时转化OperConditions时也比json-lib简单。

2、GSON简单处理JSON
json格式经常需要用到,google提供了一个处理json的项目:GSON,能很方便的处理转换java对象和JSON表达。他不需要使用annotation,也不需要对象的源代码就能使用。
以字符串为例介绍:
(1)构造json 字符串
例如 要传送json格式的字符串

String appID = req.getParameter("appID");
String userID = req.getParameter("userID");
Map map = new HashMap();
map.put("appID", appID);
map.put("userID", userID);
Gson gson = new Gson();
String state = gson.toJson(map);
(2)解析json字符串
JsonParser jsonparer = new JsonParser();//初始化解析json格式的对象
String state = req.getParameter("state");
String appID = jsonparer.parse(state).getAsJsonObject().get("appID").getAsString();
String userID = jsonparer.parse(state).getAsJsonObject().get("userID").getAsString();


阅读更多
换一批

没有更多推荐了,返回首页