java - 使用 JSON 对象响应 AJAX 请求？

Question

我正在做一个玩具程序，要求用户在html表单上输入“用户名”和“全名”，该表单将通过AJAX提交到Spark框架中的以下方法(参见here for Spark:

post("/admin/user/signup", "application/json", (request, response) -> {
            String username = request.queryParams("username");
            String fullname = request.queryParams("fullname");
            System.out.println("username is: " + username +", full name is: " + fullname);
            Map<String, Object> registerResults = new HashMap<String, Object>();
            registerResults.put("success", "successfully registered " + username);
            return new MyMessage("successful registration!");
        }, new JsonTransformer());

下面是我的 AJAX 代码，据说它提交并接收来自上述 post() 方法的响应:

<script>
        $(document).ready(function() {
            $('#registerForm').submit(function() {
                var formData = $('#registerForm').serialize();    /* capture the form data*/
                $.getJSON('/admin/user/signup', formData, registerResults);
           //     $.post('/admin/user/signup', formData, registerResults);   /* get JSON back from the post method */
            });
            function registerResults(data) {
                    $('#registerForm').fadeOut();
                    $('.starter-template').html(data.message);
                }  // end of registerResults
        });  // end of ready
        </script>

但是，AJAX代码无法接收JSON对象，而是简单地将JSON对象打印在网页/admin/user/signup上:

{"message":"successful registration!"}

所以我请求帮助如何在 Spark 中将 JSON 对象返回到 AJAX 请求？谢谢

Answer 1

您确实意识到您正在提交表单。因此，表单被提交，而不是所谓的 AJAX 调用，因此生成的页面...

因此，您应该通过简单地添加

来停止表单提交传播

event.preventDefault();

或返回错误；在提交处理程序的末尾。

在表单提交处理程序中。

<script>
        $(document).ready(function() {
            $('#registerForm').submit(function(event) {
            event.preventDefault();
                var formData = $('#registerForm').serialize();    /* capture the form data*/
                $.getJSON('/admin/user/signup', formData, registerResults);
           //     $.post('/admin/user/signup', formData, registerResults);   /* get JSON back from the post method */
            });
            function registerResults(data) {
                    $('#registerForm').fadeOut();
                    $('.starter-template').html(data.message);
                }  // end of registerResults
        });  // end of ready
        </script>