ajax提交及Spring接收

最新推荐文章于 2025-03-16 10:00:00 发布

言玉gz

最新推荐文章于 2025-03-16 10:00:00 发布

阅读量1.6k

点赞数

分类专栏： spring 文章标签： ajax spring @RequestParam @RequestBody

本文链接：https://blog.youkuaiyun.com/u010811939/article/details/80781617

版权

spring 专栏收录该内容

32 篇文章

订阅专栏

本片文章重点讨论请求方式为POST的请求。
本片文章分两部分将：

原生的ajax POST请求和ajax POST请求的不同。
application/x-www-form-urlencoded，multipart/form-data，application/json如何去接受参数。

1 原生的ajax POST请求和ajax POST请求的不同

原生的ajax POST请求代码：

<head>
	<script>
		$(function(){
			$("#saveBtn").click(function(e){
				var xhr = getXMLHttpRequest();  
		          xhr.open("post","<%=basePath%>/submitData/submitAjaxFormData");  
		          var data = "userName=mikan&password=street...";  
		          xhr.send(data);  
		          xhr.onreadystatechange= function() {  
		                   if(xhr.readyState == 4 && xhr.status == 200) {  
		                            alert("returned:"+ xhr.responseText);  
		                   }  
		          };  
			});
			function getXMLHttpRequest() {  
		          var xhr;  
		          if(window.ActiveXObject) {  
		                   xhr= new ActiveXObject("Microsoft.XMLHTTP");  
		          }else if (window.XMLHttpRequest) {  
		                   xhr= new XMLHttpRequest();  
		          }else {  
		                   xhr= null;  
		          }  
		          return xhr;  
		}  
			
		});
	</script>
  </head>
  
  <body>
   <form action="">
    	姓名：<input type = "text" name="userName" id = "userName"><br/>
    	密码：<input type = "text" name="password" id = "password"><br/>
    	<input type="button" id = "saveBtn" value="提交">
  </form>
  </body>

@RequestMapping("/submitAjaxFormData")
    public String submitAjaxFormData(
    		@RequestParam(value="userName",required=false) String userName,
    		@RequestParam(value="password",required=false) String password,
    		HttpServletRequest request) throws IOException {
    	System.out.println("\n\n");
    	System.out.println("*********************submitAjaxFormData***************************");
    	System.out.println(userName);
    	System.out.println(password);
    	System.out.println(request.getParameter("userName"));
        return "SUCCESS";
    }

这里写图片描述

从上面可看出请求媒体类型置成了text/plain;charset=UTF-8，并且参数被放到Request Payload中，而且在后台用@RequestParam没有接受到参数，并且用request.getParameter也没有拿到参数。问题出现在哪？请接着看

ajax POST请求
这次我们用我们熟悉的ajax提交信息，代码如下

<head>
	<script>
		$(function(){
			$("#saveBtn").click(function(e){
				$.ajax({
					url: '<%=basePath%>/submitData/submitAjaxFormData',
					type: 'post',
					dataType: 'json',
					data: {userName:$("#userName").val(),
							password:$("#password").val()},
					success: function(data) {
						alert(data);
						console.inof(data);
					}
				});
			});
			
		});
	</script>
  </head>
  
  <body>
   <form action="">
    	姓名：<input type = "text" name="userName" id = "userName"><br/>
    	密码：<input type = "text" name="password" id = "password"><br/>
    	<input type="button" id = "saveBtn" value="提交">
  </form>
  </body>

@RequestMapping("/submitAjaxFormData")
    public String submitAjaxFormData(
    		@RequestParam(value="userName",required=false) String userName,
    		@RequestParam(value="password",required=false) String password,
    		HttpServletRequest request) throws IOException {
    	System.out.println("\n\n");
    	System.out.println("*********************submitAjaxFormData***************************");
    	System.out.println(userName);
    	System.out.println(password);
    	System.out.println(request.getParameter("userName"));
        return "SUCCESS";
    }

这里写图片描述

经过测试，我们惊奇的发现当使用ajax提交，这是参数被放到Form Data中，请求媒体类型置成了application/x-www-form-urlencoded，而且在后台用@RequestParam和request.getParameter都能正常拿到数据。

总结：
HTTP POST表单请求提交时，使用的Content-Type是application/x-www-form-urlencoded，而使用原生AJAX的POST请求如果不指定请求头RequestHeader，默认使用的Content-Type是text/plain;charset=UTF-8。

1、由于Tomcat对于Content-Type multipart/form-data（文件上传）和application/x-www-form-urlencoded（POST请求）做了“特殊处理”。所以用@RequestParam和request.getParameter都能正常拿到数据；
application/x-www-form-urlencoded（PUT请求）用request.getParameter是取不到数据的，需要从输入流中取数据。

2、application/x-www-form-urlencoded （POST和PUT）传输使用key1=value1&key2=value2放到请求体中；而application/json（POST和PUT）请求时以JSON格式放到请求体中

3、application/x-www-form-urlencoded （POST和PUT）传输如下格式，请求体中数据

let arr = [{'name':'name1','age':'age1' },{  'name':'name2','age':'age3' }];
let info = ['name1','name2']
let params = { student: arr, info:info,sign: 'token'}

在这里插入图片描述

2 application/x-www-form-urlencoded，multipart/form-data，application/json如何去接受参数

经过上面的分析我们大概可以猜测媒体类型是application/x-www-form-urlencoded，multipart/form-data怎么去拿数据：

@RequestParam方式拿（spring帮我们做了处理）
可以用request.getParameter拿数据
request.getParameter返回的时String，而Spring注解形式的@RequestParam得到数据一般也是为String，所以当类型为其他类型的时候Spring帮助我们做了类型转换，但是有一些类型我们需要自己去做处理。

application/json
关于application/json数据传递，我们可以通过@RequestBody参数取数据，或通过request.getInputStream得到数据。