javascript에서 스프링 컨트롤러로 목록을 전달하는 방법

Question

javaScript가 두 개의 sepparate 목록을 스프링 컨트롤러에 전달할 수있는 방법에 대한 문제가 있습니다. 내 freeMarker 템플릿에서 두 목록 집합을 변경하는 옵션을 만들었습니다.

편집 : : 이 두 목록의 렌더링 나는 JQuery와

.sortable("toArray", { key: "id" }) 

방법의 UI plagin이 발견, 그래서 < 리> 태그 편집을 할

<div class="span5" id="listBox"> 
      <h3>Assigned Servers</h3> 
      <#if assignedServers?has_content> 
       <ul id="sortable1" class="connectedSortable"> 
        <#list assignedServers as responsible > 
         <li class="ui-state-default" 
          id="${responsible.id}" >${responsible.server_name}</li> 
        </#list> 
       </ul> 
      <#else> 
       <h4>This employee have no assigned servers yet.</h4> 
      </#if> 
     </div> 

     <div class="span5" id="listBox"> 
      <h3>Available Servers</h3> 
      <#if availableServers?has_content> 
       <ul id="sortable2" class="connectedSortable"> 
        <#list availableServers as available > 
         <li class="ui-state-default" 
          id="${available.id}" >${available.server_name}</li> 
        </#list> 
       </ul> 
      <#else> 
       <h4>There is no available servers to assign.</h4> 
      </#if> 
     </div> 

에 ID 값을 추가 : 나는 JQuery 함수를 변경했다.

<script> 
     $(function() { 
      var assigned = ""; 
      var available = ""; 

      $('#sortable1').sortable({ 
       connectWith: '#sortable2', 
       update: function(event, ui) { 
        assigned = $(this).sortable("toArray", { key: "id" }); 
        } 
      }).disableSelection(); 

      $('#sortable2').sortable({ 
       connectWith: '#sortable1', 
       update: function(event, ui) { 
        available = $(this).sortable("toArray", { key: "id" }); 
        } 
      }).disableSelection(); 

      $('#assign').click(function(){ 
       $.ajax({ 
        type: "POST", 
        url: "/ServerMonitoring/employee_management/serv_assignment/2", 
        data: JSON.stringify({ 
         serversListModel: { 
          "assignedServers": assigned, 
          "availableServers": available 
         } 
        }), 
        datatype: "jsondata", 
        contentType: 'application/json', 
        success: function(data) { 
         alert("Success"); 
        }, 
        error: function (e) { 
         alert("Error: " + e); 
        } 
       }); 
       return false; 
      }); 
      //debugger 
     }); 
    </script> 

EDITED : 이것은 나의 새로운 봄 컨트롤러 :

@RequestMapping(value = "/{id}", method = RequestMethod.POST) 
public @ResponseBody ModelAndView onSubmit(
     @ModelAttribute("serversListModel") ServersListModel serversListModel, 
     @PathVariable("id") Long responsibleId, 
     BindingResult result, 
     HttpServletRequest request, 
     HttpServletResponse response, 
     SessionStatus status) throws ParseException { 

    if (!result.hasErrors()) { 
     if (serversListModel.getAvailableServers() != null) { 
      for (String id : serversListModel.getAvailableServers()) { 
       ServerEntity entity = employeeService.getServerById((long)Integer.parseInt(id)); 
       entity.setResponsible(responsibleId); 
       adminService.updateServer(entity); 
      } 
     } 

     if (serversListModel.getAssignedServers() != null) { 
      for (String id : serversListModel.getAssignedServers()) { 
       ServerEntity entity = employeeService.getServerById((long)Integer.parseInt(id)); 
       entity.setResponsible((long) 0); 
       adminService.updateServer(entity); 
      } 
     } 
     status.setComplete(); 
     return new ModelAndView("redirect:/employee_management/employee_manager"); 


    } else { 
     response.setStatus(HttpServletResponse.SC_BAD_REQUEST); 
     return new ModelAndView("redirect:/employee_management/serv_assignment"); 
    } 

} 

편집 : - : 나는,

{"serversListModel":{"assignedServers":["2","4"],"availableServers":["1","5","3","6","7","8"]}} 

그러나 새로운 ServersListModel는 JSON 문자열 통과 지르고 ICAN 자체에 debuging으로 두 바르

public class ServersListModel { 

private List<String> assignedServers; 

private List<String> availableServers; 
... 
} 

간단한 POJO이야 여전히 그 문자열을 유지하기 위해 관리하지 못했습니다. 내 모델에있는 vars은 디버깅시 NULL을 포함합니다. @ModelAttribute ("serversListModel")에 @RequestBody anotation을 배치하면 Jquery가 BadRequest 오류를 발생시킵니다. 메소드 본문 안에, 내가

String jsonBody = IOUtils.toString(request.getInputStream()); 

를 호출하면 그것은 requerd ID로 JSON 문자열 객체를 반환합니다, 그래서 난 리키 근처에 답변을 해요.

컨트롤러에서 실수를 찾으십시오. 고맙습니다.

<dependency> 
     <groupId>org.codehaus.jackson</groupId> 
     <artifactId>jackson-mapper-asl</artifactId> 
     <version>1.9.13</version> 
    </dependency> 

: 그럼 난 메이븐 의존성을 추가

public class ServersListModel { 

private List<Long> assignedServers; 

private List<Long> availableServers; 

:

Answer 1

나는 내 문제를 해결하기 위해 관리하고 난 당신과 함께 해결책을 공유하고 :

내가 롱 타입에 내 모델을 변경

과 같이 잭슨을 구성 :

<bean id="jacksonMessageConverter" 
     class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"/> 
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"> 
    <property name="messageConverters"> 
     <list> 
      <ref bean="jacksonMessageConverter" /> 
     </list> 
    </property> 
</bean> 

<bean id="defaultViews" 
     class="org.springframework.web.servlet.view.json.MappingJacksonJsonView" /> 

,

(나는 cecking되지 않은 그들 모두는 = 중요한 경우))

아냐 내 JQury.Ajax 스크립트는 다음과 같이 :

$(function() { 
      var assigned = ""; 
      var available = ""; 

      $('#sortable1').sortable({ 
       connectWith: '#sortable2', 
       dropOnEmpty: true, 
       update: function(event, ui) { 
        assigned = $(this).sortable("toArray", { key: "id" }); 
        } 
      }).disableSelection(); 

      $('#sortable2').sortable({ 
       connectWith: '#sortable1', 
       dropOnEmpty: true, 
       update: function(event, ui) { 
        available = $(this).sortable("toArray", { key: "id" }); 
        } 
      }).disableSelection(); 

      $('#assign').click(function(){ 
       $.ajax({ 
        type: "POST", 
        url: "/ServerMonitoring/employee_management/serv_assignment/2", 
        data: JSON.stringify({ 
          assignedServers: assigned, 
          availableServers: available 
        }), 
        datatype: "json", 
        'scriptCharset': "utf-8", 
        'contentType': "application/json;charset=UTF-8", 
        success: function(data) { 
         //alert("Success"); 
        }, 
        error: function (e) { 
         //alert("Error: " + e); 
        } 
       }); 
       return false; 
      }); 
      //debugger 
     }); 

그리고 마침내 내 MVC 컨트롤러 :

@RequestMapping(value = "/{id}", method = RequestMethod.POST) 
public @ResponseBody ModelAndView onSubmit(
     @RequestBody ServersListModel serversListModel, 
     @PathVariable("id") Long responsibleId, 
     BindingResult result, 
     SessionStatus status) throws ParseException, IOException { 

    if (!result.hasErrors()) { 
     if (serversListModel.getAssignedServers() != null) { 
      for (Long id : serversListModel.getAssignedServers()) { 
       ServerEntity entity = employeeService.getServerById(id); 
       entity.setResponsible(responsibleId); 
       adminService.updateServer(entity); 
      } 
     } 

     if (serversListModel.getAvailableServers() != null) { 
      for (Long id : serversListModel.getAvailableServers()) { 
       ServerEntity entity2 = employeeService.getServerById(id); 
       entity2.setResponsible((long) 0); 
       adminService.updateServer(entity2); 
      } 
     } 
     status.setComplete(); 
     return new ModelAndView("redirect:/employee_management/employee_manager"); 
    } else { 
     return new ModelAndView("redirect:/employee_management/serv_assignment"); 
    } 
} 

모든 것이 완벽하게 작동합니다. 즐겨 !!!