下拉框表单联动案例

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

由于要实现的功能是表单联动，只能自己去写ajax来实现提交给后台接口了，好久没有写前端，好多东西都忘记了，只能可怜巴巴的用原生的js去实现。

特此总结一下：首先要使用SpringMVC来接收和返回JSON格式的数据，必须要先配置：

在spring-mvc.xml加上如下配置：

            <mvc:annotation-driven />    

由于使用的是maven项目，因此需要加上相关dependency：

        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-core-lgpl</artifactId>
            <version>1.8.1</version>
        </dependency>

        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-lgpl</artifactId>
            <version>1.8.1</version>
        </dependency>

    在controller里这样写：

    // 区域表单联动查询
    @RequestMapping(value = "/basicinfo/area/getChild.action" , method = {RequestMethod.POST })
    public @ResponseBody List<Area> getChild(@RequestBody Area area ) {
        System.out.println(area.getParentId()+"-----");
        HashMap<String, Integer> map = new HashMap<String, Integer>();
        map.put("parentId", area.getParentId());
        List<Area> dataList = areaService.find(map);
        return dataList;
    }

注意：前台ajax提交过来的参数映射进被@RequestBody注解的Area类，因此，ajax里的参数名称必须要和Area类里的参数名称一致，否则会出现HTTP请求415，类型不支持的情况。返回到list数据也要加上注解。

在js里应该这样写：

//val 提交隐藏域，并且调用ajax去联动第二个表单
    function setFirstParent(val) {
        var element = document.getElementById("fp");
        element.value = val;
        var param = {
            "parentId" : val
        };
        var select = document.getElementById("secondSelect");
        //先清空，在添加一个请选择
        $("#secondSelect").find("option").remove();
        var option = document.createElement("option");
        option.setAttribute("value", "0");
        option.appendChild(document.createTextNode("--请选择--"));
        select.appendChild(option);
        $.ajax({
                    url : "${pageContext.request.contextPath}/basicinfo/area/getChild.action", //请求地址
                    type : "POST", //请求方式
                    data : JSON.stringify(param), //请求参数
                    dataType : "json",
                    contentType : 'application/json;charset=utf-8', //指定为json类型
                    success : function(response) {
                        for (var i = 0; i < response.length; i++) {
                            var option = document.createElement("option");
                            option.setAttribute("value", response[i].id);   //添加value
                            option.appendChild(document
                                    .createTextNode(response[i].areaName));   //添加显示的内容
                            select.appendChild(option);
                        }
                    },
                    fail : function(status) {
                        alert("接口调用异常");
                    }
                });
    }

在第一个下拉菜单的onchange事件里调用相关的参数来查询第二个下拉菜单，注意在联动查询之前，需要先清空当前菜单的options然后再添加进去。