SpringBoot中采用Ajax请求实现前台与后台的数据交互的方式_ajax 键值对 springboot 交互

方式一

前台方式1：

$(function(){
        $("#reg-btn").click(function () {
            var formdata = new FormData();
            formdata.append("userName", $("#userName").val());
            formdata.append("userEmail", $("#userEmail").val());
            formdata.append("userPassword", $("#userPassword").val());
            formdata.append("userPasswordAgain", $("#userPasswordAgain").val());
            alert($("#userPasswordAgain").val());
            $.ajax({
                url: "/doRegister",
                type: "POST",
                contentType: false,  //注意点，必须是 false
                processData:false,   //注意点，必须是 false
                //dataType: "json", 主要说明的是，他是指定返回值类型（response），而不是发送的数据类型
                data: formdata,
                success: function (response) {
                	//由于后台传过来的 Map 类型的数据，所以不需要使用var result = JSON.parse(response);再解析成Json格式了
                    if(response.code === "100"){
                        $.each(response, function (k,v) {
                            $("#"+k).parent().prev("span").css("color","red").text(v);
                        });
                    }
                    else{
                        window.location.href = "/index";
                    }
                }
            })
        })
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

前台方式2：

$(function(){
        $("#reg-btn").click(function () {
            $.ajax({
                url: "/doRegister",
                type: "POST",
                data: $("#form").serialize(), //区别在这里，直接发送一个表单
                success: function (response) {
                    // var result = JSON.parse(response);
                    if(response.code === "100"){
                        $.each(response, function (k,v) {
                            $("#"+k).parent().prev("span").css("color","red").text(v);
                        });
                    }
                    else{
                        window.location.href = "/index";
                    }
                }
            })
        })
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

后台

@PostMapping("doRegister")
@ResponseBody  //注意点，一定要返回数据，不能跳转
//返回的数据类型是Map
public Map<String, String> doRegister(@Validated User user, BindingResult result, Model model, HttpServletRequest request)
1
2
3
4

---

方式二

前台

$(function(){
        $("#reg-btn").click(function () {
            $.ajax({
                url: "/doRegister",
                type: "POST",
                contentType:"application/json;charset=utf-8",  //注意，这里是json格式
                data: JSON.stringify({
                    userName: $("#userName").val(),
                    userEmail: $('#userEmail').val(),
                    userPassword: $('#userPassword').val(),
                    userPasswordAgain: $('#userPasswordAgain').val(),
                }),
                success: function (response) {
                    if(response.code === "100"){
                        $.each(response, function (k,v) {
                            $("#"+k).parent().prev("span").css("color","red").text(v);
                        });
                    }
                    else{
                        window.location.href = "/index";
                    }
                }
            })
        })
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

后台

@PostMapping("doRegister")
@ResponseBody
//接收的参数前面一定要加@RequestBody注解
public Map<String, String> doRegister(@Validated @RequestBody  User user, BindingResult result, Model model, HttpServletRequest request)
1
2
3
4

@ResponseBody的详细介绍，参见这篇博客