下拉框表单联动案例

这几天忙着做学校的项目，感觉好久没有更新博客了，来整理一下。

由于要实现的功能是表单联动，只能自己去写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然后再添加进去。