下拉框表单联动案例

Java基础

浏览数:6

2019-9-11

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

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

作者:jy的blog