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

以你之姓@ 2023-07-03 08:18 15阅读 0赞

#### 方式一 ####

###### 前台方式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";
                        }
                    }
                })
            })
        });

###### 前台方式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";
                        }
                    }
                })
            })
        });

##### 后台 #####

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

--------------------

### 方式二 ###

前台

$(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";
                        }
                    }
                })
            })
        });

#### 后台 ####

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

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

[ResponseBody]: https://blog.csdn.net/justry_deng/article/details/80972817