下拉框表单联动案例
这几天忙着做学校的项目，感觉好久没有更新博客了，来整理一下。
由于要实现的功能是表单联动，只能自己去写ajax来实现提交给后台接口了，好久没有写前端，好多东西都忘记了，只能可怜巴巴的用原生的js去实现。
特此总结一下：首先要使用SpringMVC来接收和返回JSON格式的数据，必须要先配置：
在spring-mvc.xml加上如下配置：
<mvc:annotation-driven />
由于使用的是maven项目，因此需要加上相关dependency：
1 <dependency> 2 <groupId>org.codehaus.jackson</groupId> 3 <artifactId>jackson-core-lgpl</artifactId> 4 <version>1.8.1</version> 5 </dependency> 6 7 <dependency> 8 <groupId>org.codehaus.jackson</groupId> 9 <artifactId>jackson-mapper-lgpl</artifactId> 10 <version>1.8.1</version> 11 </dependency>
在controller里这样写：
1 // 区域表单联动查询 2 @RequestMapping(value = "/basicinfo/area/getChild.action" , method = {RequestMethod.POST }) 3 public @ResponseBody List<Area> getChild(@RequestBody Area area ) { 4 System.out.println(area.getParentId()+"-----"); 5 HashMap<String, Integer> map = new HashMap<String, Integer>(); 6 map.put("parentId", area.getParentId()); 7 List<Area> dataList = areaService.find(map); 8 return dataList; 9 }
注意：前台ajax提交过来的参数映射进被@RequestBody注解的Area类，因此，ajax里的参数名称必须要和Area类里的参数名称一致，否则会出现HTTP请求415，类型不支持的情况。返回到list数据也要加上注解。
在js里应该这样写：
1 //val 提交隐藏域，并且调用ajax去联动第二个表单 2 function setFirstParent(val) { 3 var element = document.getElementById("fp"); 4 element.value = val; 5 var param = { 6 "parentId" : val 7 }; 8 var select = document.getElementById("secondSelect"); 9 //先清空，在添加一个请选择 10 $("#secondSelect").find("option").remove(); 11 var option = document.createElement("option"); 12 option.setAttribute("value", "0"); 13 option.appendChild(document.createTextNode("--请选择--")); 14 select.appendChild(option); 15 $.ajax({ 17 url : "${pageContext.request.contextPath}/basicinfo/area/getChild.action", //请求地址 18 type : "POST", //请求方式 19 data : JSON.stringify(param), //请求参数 20 dataType : "json", 21 contentType : 'application/json;charset=utf-8', //指定为json类型 22 success : function(response) { 23 for (var i = 0; i < response.length; i++) { 24 var option = document.createElement("option"); 25 option.setAttribute("value", response[i].id); //添加value 26 option.appendChild(document 27 .createTextNode(response[i].areaName)); //添加显示的内容 28 select.appendChild(option); 29 } 30 }, 31 fail : function(status) { 32 alert("接口调用异常"); 33 } 34 }); 35 }
在第一个下拉菜单的onchange事件里调用相关的参数来查询第二个下拉菜单，注意在联动查询之前，需要先清空当前菜单的options然后再添加进去。
