您的位置:首页 > Web前端 > JQuery

springmvc+hibernate+ajax+jquery+freemarker制作二级联动

2016-07-27 16:01 633 查看
二级联动在网站开发很常见,以下简单说操作流程:

action类:

@RequestMapping("/cityType.do")
@ResponseBody
public Map<String,Object> list(HttpServletRequest request, int id) {
//String resultMessage="";
City city=cityMng.findById(id);
Set<Town> towns=city.getTowns();
if(towns.size()>0){
request.setAttribute("towns",towns);
//resultMessage="OK";
}
else{
//resultMessage="未找到信息";
}
Map<String,Object> returnMap=new HashMap<String ,Object>();
returnMap.put("towns", towns);
return returnMap;
}


前端页面:

二级联动的代码:

<div class="form-group">
<label class="control-label col-md-3">所属镇区
<span class="required"> * </span>
</label>
<div class="col-md-4">
<select name="city" id="city" class="form-control input-small" onchange="javascript:cityChange()">
<option>--请选择城市--</option>
<#list cityList as city>
</option>
</#list>
</select>
<select name="town" id="townList" class="form-control input-small">
<option>--请选择镇区--</option>
</select>

</div>
</div>


js-ajax部分:

<script type="text/javascript">
function cityChange() {

var type = $("#city").val();

var html = "";
var CommitUrl = "../cityType.do?id=" + type;

$.ajax({
type : "POST",
contentType : "application/json",
url : CommitUrl,
dataType : 'json',
success : function(result) {
var Curedata = $.extend(true, [], result);
if (Curedata.towns != null) {
for ( var i = 0; i < Curedata.towns.length; i++) {

html += "<option value='"+Curedata.towns[i].id+"'>"+ Curedata.towns[i].townName
+ "</option>";
}
$("#townList").empty();
$(html).appendTo("#townList");

}
}

});
}
</script>


ps:在开发中会出现的几个问题:

1.HttpMediaTypeNotAcceptableException

原因:spring文件没有配置json解析器

解决方法:

在class为AnnotationMethodHandlerAdapter的bean加入属性

<property name="messageConverters">
<list>
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>
text/html;charset=UTF-8
</value>
</list>
</property>
</bean>
<!-- 启动JSON格式的配置 -->
<bean id="jacksonMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
<!-- 解决 HttpMediaTypeNotAcceptableException: Could not find acceptable representation -->
<property name="supportedMediaTypes">
<list>
<value>application/json;charset=UTF-8</value>
</list>
</property>
</bean>
</list>
</property>


2.java.lang.ClassNotFoundException: org.codehaus.jackson.map.JsonSerializableWithType

解决办法:导入jsckson-all-1.7.6.jar

3.进行ajax请求时出现



设计中city(城市) 和 town(镇区) 是一对多双向关联

原因: JSON无法对town的city属性进去JSON转换

解决方法:

在city的是实体类添加注解@JsonIgnoreProperties(value={“city”})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  springmvc