如何使用Ajax将表单数据发送到Spring控制器

时间:2019-05-07 14:28:30

标签: javascript java ajax spring thymeleaf

我有一个用百里香生成的Sudoku板,我想将所有图块值作为双精度数组发送到Spring控制器或作为字符串发送。

<form class="box" id="sudokuBoard">
        <table>
            <tr th:each="row: ${board}">
                <td th:each="value: ${row}">
                    <div th:switch="${value}">
                        <input th:case="0" style="width:30px;height:30px;text-align:center" type = "text" maxlength="1" value="0">
                        <input th:case="*" style="width:30px;height:30px;text-align:center;background-color:lightgreen" type = "text" th:value="${value}" readonly>
                    </div>
                </td>
            </tr>
        </table>

        <input type="submit"> Check Solution </input>
    </form>

我尝试使用serialize()函数,但是没有发送任何东西,或者我做错了什么。

<script>
        $("#sudokuBoard").submit(function(e) {

            e.preventDefault(); // avoid to execute the actual submit of the form.

            var form = $(this);

            $.ajax({
                type: "POST",
                url: "/sudoku",
                dataType: 'json',
                data: form.serialize(),
                success: function(msg)
                {
                    console.log("data sent");
                }
            });
        });
    </script>

这是Spring控制器

@RequestMapping(value = "/sudoku", method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_VALUE)
    String checkBoardStatus(@RequestBody String jsonString){
        System.out.println("json string: " + jsonString);
        return "sudoku";
    }

2 个答案:

答案 0 :(得分:0)

您可以使用此示例,其中成功将是您的回调方法

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: function(result) {},
  dataType: dataType
});

答案 1 :(得分:0)

@RequestMapping(value = "/sudoku", method = RequestMethod.POST)
String checkBoardStatus(Map<String,Object> params){
    System.out.println("Request Params: " + params);
    return "sudoku";
}

上面的代码是用户。.尝试使用DTO类而不是Map映射请求正文,并且不要使用@RequestBody注释