如何將JavaScript從JavaScript列表傳遞到彈簧控制器

我有問題，javaScript如何將兩個不同的列表傳遞給彈簧控制器。在我的freeMarker模板上，我選擇了更改兩個列表的集合。這是使兩個列表：如何將JavaScript從JavaScript列表傳遞到彈簧控制器

編輯：我發現jQuery的有UI plagin與

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

方法，所以我加了標識值< li>標籤

<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>

編輯：我改變了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>

編輯：這是我的新春控制器：

@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 - 這是兩個瓦爾

public class ServersListModel { 

private List<String> assignedServers; 

private List<String> availableServers; 
... 
}

一個簡單的POJO通過螢火ICAN本身調試運行的是JSON是通過字符串：

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

但是，我仍然沒有設法阻止該字符串，我的模型中的變量stil在調試時包含NULL。在@ModelAttribute（「serversListModel」）的位置放置@RequestBody anotation會導致Jquery拋出BadRequest錯誤。如果方法體裏面，我叫

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

它將返回JSON字符串對象與requerd ID，所以我裏基附近的回答。

請幫我找出Controller中的錯誤。謝謝。

來源

2013-08-17 Serge

你的控制器方法是什麼樣的？ – superEb

另請參閱：http://stackoverflow.com/questions/18187123/how-to-pass-a-javascript-array-to-the-spring-controller-class – superEb

@superEb，我添加了控制器代碼。 – Serge

我設法解決我的問題，我想與大家分享的解決方案：

我改變了我的模型，長型：

public class ServersListModel { 

private List<Long> assignedServers; 

private List<Long> availableServers;

然後我說Maven的依賴性：

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

並配置爲這樣的傑克遜：

<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 
     });

而且finaly我的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"); 
    } 
}

一切工作都很完美。請享用！！！

來源

2013-08-19 20:37:21 Serge

如何將JavaScript從JavaScript列表傳遞到彈簧控制器

回答

相關問題