SpringMVC实现JSON与前台交互

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

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