ajax提交及Spring接收

本片文章重点讨论请求方式为POST的请求。
本片文章分两部分将：
1. 原生的ajax POST请求和ajax POST请求的不同。
2. 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，而且在后台用@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提交，请求媒体类型置成了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。

由于Tomcat对于Content-Type multipart/form-data（文件上传）和application/x-www-form-urlencoded（POST请求）做了“特殊处理”。所以用@RequestParam和request.getParameter都能正常拿到数据。

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

经过上面的分析我们大概可以猜测媒体类型是application/x-www-form-urlencoded，multipart/form-data怎么去拿数据：
1. @RequestParam方式拿（spring帮我们做了处理）
2. 可以用request.getParameter拿数据
request.getParameter返回的时String，而Spring注解形式的@RequestParam得到数据一般也是为String，所以当类型为其他类型的时候Spring帮助我们做了类型转换，但是有一些类型我们需要自己去做处理。

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