@RequestBody和@RequestParam

Conan_9527

已于 2022-07-14 18:37:52 修改

阅读量2.4k

点赞数 1

分类专栏： java基础文章标签：大数据

于 2022-07-14 18:19:34 首次发布

本文链接：https://blog.csdn.net/Conan_9527/article/details/125789716

版权

java基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

@RequestBody主要用来接收JSON字符串格式的数据(请求体中的数据,Content-Type为application/json类型的请求)，如：

接收Content-Type为application/json类型的请求,数据类型是JSON：{"aaa":"111","bbb":"222"}

tips：1.由于GET请求没有请求体，所以这个注解只能搭配POST方法使用

tips：2.如果不写@Requestbody可以接收「application/x-www-form-urlencoded;charset=utf-8」类型的请求所提交的数据，数据格式：aaa=111&bbb=222 。经典的form表单提交以及jQuery的.post()方法所发送的请求默认就是这种类型

如果参数前写了@RequestParam(xxx)，那么前端必须有对应的xxx名字才行，不管其是否有值；

如果不写，前端可以没有该字段，但如果有也会正确匹配

tips：3.虽然ajax的data属性值格式（或称json对象）为:{key1:value1,key2:value2},但最后会转为key1=value1&key2=value2的格式提交到后台

tips：4.json对象和json字符串转换：var jsonStr = JSON.stringify(jsonObject)

@RequestParam接收的是***key-value***里面的参数，如下：

var url = ctx + "captcha/captchaImage?type=" + captchaType + "&s=" + Math.random();

@RequestBody和@ResquestParam()可以在同一个接口中一起用，@RequestBody最多只能有一个，而@ResquestParam()可以有多个，如：

@RequestMappint("/post1")
public String postRequest(@RequestBody User user,@RequestParam("limit") String limit,@RequestParam("page") String page){
    return "";
}

几个前后端交互例子：

1.$.get

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery $.get()方法</title>
<script src="jquery-3.4.1.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $.get("/testGet",function(data,status){
                alert("数据: " + data + "\n状态: " + status);
            });
        });
    });
</script>
</head>
<body>
<button>发送一个HTTP GET请求并获取返回结果</button>
</body>
</html>

//跳转到testGet.html视图
@RequestMapping("/")
   public String toTestGet(){
     return "testGet";
}  
 
 
//返回String对象
@GetMapping("/testGet")
@ResponseBody
public String testGet(){
   return "数据：这是从控制器中读取的数据。";
}

2.$.post

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery $.post()方法</title>
<script src="jquery-3.4.1.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.post("/testPost2",{
			name:"菜鸟教程",
			url:"http://www.runoob.com"
		},
		function(data,status){
			alert("数据: \n" + data + "\n状态: " + status);
		});
	});
});
</script>
</head>
<body>
 
<button>发送一个HTTP POST请求页面并获取返回内容</button>
 
</body>
</html>

//两种接受方式

//使用注解@RequestParams接收参数
@PostMapping("/testPost1")
@ResponseBody
public String testPost1(@RequestParam(value = "name") String name,
                            @RequestParam(value = "url") String  url){
    String webName="网站名："+name;
    String webURL="URL地址:"+url;
    return webName+"\n"+webURL;
}
 
//将参数封装成javaBean对象
@PostMapping("/testPost2")
@ResponseBody
public String testPost2(WebSite webSite){
    String webName="网站名："+webSite.getName();
    String webURL="URL地址:"+webSite.getUrl();
    return webName+"\n"+webURL;
}

3.$.ajax get&post

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试ajax()的get</title>
    <script src="jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $.ajax({
                    url: "/testAjaxGet",
                    type: "get",
                    data: getTestJson(),
                    dataType: "json",
                    success: function (data) {
                        alert("数据:\n" + data.name + "\n" + data.url);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //这个error函数调试时非常有用，如果解析不正确，将会弹出错误框
                        alert(XMLHttpRequest.responseText);
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus); // parser error;
                    }
                });

                function getTestJson() {
                    var data = {
                        "name": "菜鸟教程",
                        "url": "123456",
                    };
                    return data;
                }
            });
        });

        $(document).ready(function () {
            $("button").click(function () {
                $.ajax({
                    url: "/testAjaxPost",
                    type: "post",
                    data: getTestJson(),
                    dataType: "json",
                    success: function (data) {
                        alert("数据:\n" + data.name + "\n" + data.url);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //这个error函数调试时非常有用，如果解析不正确，将会弹出错误框
                        alert(XMLHttpRequest.responseText);
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus); // parser error;
                    }
                });

                function getTestJson() {
                    var data = {
                        "name": "菜鸟教程",
                        "url": "123456",
                    };
                    return data;
                }
            });
        });

    </script>
</head>
<body>
<button>发送一个HTTP AJAX-Get请求并获取返回结果</button>
</body>
</html>

    //测试ajax的get类型
    @GetMapping("/testAjaxGet")
    @ResponseBody
    public WebSite testAjaxGet(WebSite webSite){
        return webSite;
    }


    //测试ajax的post类型
    @PostMapping("/testAjaxPost")
    @ResponseBody
    public WebSite testAjaxPost(WebSite webSite){
        return webSite;
    }