FormData 和 Payload 是浏览器传输给接口的两种格式, 这两种方式浏览器是通过 Content-Type 来进行区分的 (了解 Content-Type http://www.cnblogs.com/tugenhua0707/p/8975121.html ), 如果是 application/x-www-form-urlencoded 的话, 则为 formdata 方式, 如果是 application/JSON 或 multipart/form-data 的话, 则为 request payload 的方式.
比如如下使用 Ajax 方式的提交 post 请求的代码 (默认使用 application/x-www-form-urlencoded 编码):
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- </title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
- <script type="text/javascript" src="https://tugenhua0707.github.io/html5UploadImage/js/jquery.js">
- </script>
- </head>
- <body>
- <div id="app">
- <div class="btn">
- 发送 post 请求
- </div>
- </div>
- <script>
- var obj = {
- "name": 'CntChen',
- "info": 'Front-End',
- };
- $('.btn').click(function() {
- $.Ajax({
- url: 'www.example.com',
- type: 'POST',
- dataType: 'json',
- data: obj,
- success: function(d) {}
- })
- });
- </script>
- </body>
- </HTML>
如下图所示:
2. 使用 multipart/form-data 表单上传文件
如下 HTML 代码:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- </title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
- </head>
- <body>
- <div id="app">
- <form action="http://www.example.com" method="POST" enctype="multipart/form-data">
- <p>
- username:
- <input type="text" name="fname" />
- </p>
- <p>
- age:
- <input type="text" name="age" />
- </p>
- <input type="submit" value="提交" />
- </form>
- </div>
- </body>
- </HTML>
如下图所示:
可以看到 使用 multipart/form-data 表单上传文件时使用的是 Request Payload 格式;
3. 使用 Content-Type: application/JSON 来编码
如下 HTML 代码:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- </title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
- <script type="text/javascript" src="https://tugenhua0707.github.io/html5UploadImage/js/jquery.js">
- </script>
- </head>
- <body>
- <div id="app">
- <div class="btn">
- 发送 post 请求
- </div>
- </div>
- <script>
- $('.btn').click(function() {
- $.Ajax({
- url: 'http://localhost:8081/api.json',
- type: 'POST',
- dataType: 'json',
- contentType: 'application/json',
- data: JSON.stringify({
- a: [{
- b: 1,
- a: 1
- }]
- }),
- success: function(d) {}
- })
- });
- </script>
- </body>
- </HTML>
如下图所示
如果请求头里设置 Content-Type: application/x-www-form-urlencoded, 那么这个请求被认为是表单请求, 参数出现在 Form Data 里, 格式为 key=value&key=value&key=value.... 后端可以通过 request.getParameter(name) 的形式来获取表单参数.
原生的 Ajax 请求头里设置 Content-Type:application/JSON, 或者使用默认的请求头 Content-Type:text/plain; 参数会显示在 Request payload 块里提交.
后端可以通过 request.getParameter(name) 的形式来获取表单参数.
- private String getStringFromStream(HttpServletRequest req) {
- ServletInputStream is;
- try {
- is = req.getInputStream();
- int nRead = 1;
- int nTotalRead = 0;
- byte[] bytes = new byte[10240];
- while (nRead> 0) {
- nRead = is.read(bytes, nTotalRead, bytes.length - nTotalRead);
- if (nRead> 0)
- nTotalRead = nTotalRead + nRead;
- }
- String str = new String(bytes, 0, nTotalRead, "utf-8");
- return str;
- } catch (IOException e) {
- e.printStackTrace();
- return "";
- }
- }
来源: http://www.bubuko.com/infodetail-2896234.html