java - javascriptからスプリングコントローラーにリストを渡す方法

Question

javaScript が 2 つの別々のリストをスプリング コントローラーに渡す方法の問題があります。freeMarker テンプレートで、2 つのリストのセットを変更するオプションを作成しました。これは 2 つのリストのレンダリングです。

EDITED：JqueryにはUi plaginがあることがわかりました

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

メソッドなので、 <li> タグに Id 値を追加しました

<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 - 2 つの変数を持つ単純な POJO です

public class ServersListModel {

private List<String> assignedServers;

private List<String> availableServers;
...
}

FireBug でデバッグすると、JSON が文字列を渡していることがわかります。

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

しかし、私はまだその文字列を復元することができませんでした.私のモデルの変数には、デバッグ時に NULL が含まれています. @ModelAttribute("serversListModel") の代わりに @RequestBody アノテーションを配置すると、Jquery が BadRequest エラーをスローします。メソッド本体内で呼び出した場合

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

リクエストIDを持つJSON文字列オブジェクトを返すので、私は答えようとしています。

コントローラーの間違いを見つけるのを手伝ってください。ありがとうございました。