处理 Ajax 请求

处理 Ajax 请求

Spring MVC 的 Controller 处理 AJAX 请求很简单，只需要在方法的前面加上 @ResponseBody 即可。
Controller 的方法一般返回 String(可以是JSON, XML, 普通的 Text)，也可以是对象。

返回 Json 字符串

1. Controller 中添加方法

@GetMapping("/ajax")
@ResponseBody // 处理 AJAX 请求，返回响应的内容，而不是 View Name
public String ajaxString() {
    return "{\"username\": \"Josh\", \"password\": \"Passw0rd\"}";
}

2. 访问 http://localhost:8080/ajax

输出: {username: "Josh", password: "Passw0rd"}

自动转换对象为 Json

在前面的 springmvc-servlet.xml 中已经配置好了使用 Fastjson 把对象自动映射为 Json:

1. Gradle 依赖

    
compile 'com.alibaba:fastjson:1.2.41'

2. 配置

3. 创建类 Result.java

package com.xtuer.bean;
public class Result {
    private boolean success;
    private String message;
    private Object data;
    public Result(boolean success, String message) {
        this(success, message, null);
    }
    public Result(boolean success, String message, Object data) {
        this.success = success;
        this.message = message;
        this.data = data;
    }
    
    // Getters and Setters
}

Controller 里添加方法

@GetMapping("/ajax-object")
@ResponseBody
public Result ajaxObject() {
    return new Result(true, "你好");
}

访问 http://localhost:8080/ajax-object
输出: {"message":"你好","success":true}

参考资料

Spring MVC fastjson 与 Jackson 的 MessageConverter 配置

serializeJSON ajax数据转为json数据对象传入

cdn

<%--seralizeJson--%>
<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.8.1/jquery.serializejson.js"></script>

javascript

image.png

        $.ajax({
                url:"newTopic",
                dataType: "json",
                contentType:"application/json;charset=UTF-8",
                type:"post",
                data:JSON.stringify($('#topicForm').serializeJSON())  ,
                beforeSend:function(){
                    $("#sendBtn").text("发布中").attr("disabled","disabled");
                },
                success:function(json){
                    if(json.status == "success"){
                        window.location.href="/topicDetail?topicid="+json.data.id;
                    }else {
                        swal("新增主题异常");
                    }
                },
                error:function(){
                    swal("服务器异常");
                },
                complete:function () {
                    $("#sendBtn").text("发布主题").removeAttr("disabled");
                }

            })

控制器

image.png

$('#formDemo').serializeJSON()返回的是一个Object体
{userName: "test", password: "test", role: "管理员", phone: "18888888866", nickName: "测试"}

JSON.stringify($('#formDemo').serializeJSON())返回的是JSON字符串
{"userName":"test","password":"test","role":"管理员","phone":"18888888866","nickName":"测试"}

参考资料

serializeJSON教程