用 JSON 对象响应 AJAX 请求？答案

【问题标题】：respond to AJAX request with JSON object?用 JSON 对象响应 AJAX 请求？
【发布时间】：2014-06-04 06:43:30
【问题描述】：

我正在做一个玩具程序，要求用户在 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 请求？谢谢

【问题讨论】：

标签： java json ajax spark-java

【解决方案1】：

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

所以你应该通过简单地添加来停止表单提交传播

event.preventDefault();

或return false;在提交处理程序的末尾。

在表单提交处理程序中。

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

【讨论】：

【解决方案2】：

而不是return new MyMessage("successful registration!");

就这样通过return new MyMessage(registerResults);

现在，您不会返回此 registerResults 地图值。
我希望你正在使用 play framework。那么它应该可以工作

还有一件事，您应该拒绝提交表单。所以，使用

 $('#registerForm').submit(function(e) {
            e.preventDefault();
// do your stuff here

});

【讨论】：

【解决方案3】：

使用 html() 函数不能将 json 视为 HTML，需要通过 jQuery 的 parseJson() 函数解析：http://api.jquery.com/jquery.parsejson/

var obj = jQuery.parseJSON(data);
$('.starter-template').html(obj.message);

【讨论】：

使用 getJSON 消除了使用 Parse 的必要性。