zoukankan      html  css  js  c++  java
  • HTTP请求中 request payload 和 formData 区别?

      原文地址: http://www.cnblogs.com/tugenhua0707/p/8975615.html  

           FormData和Payload是浏览器传输给接口的两种格式,这两种方式浏览器是通过Content-Type来进行区分的(了解Content-Type),如果是 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>
    

      如下图所示

      

      

    1. 如果请求头里设置Content-Type: application/x-www-form-urlencoded,那么这个请求被认为是表单请求,参数出现在Form Data里,格式为key=value&key=value&key=value...。后端可以通过request.getParameter(name)的形式来获取表单参数。

    2. 原生的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 "";
    	}
    }
    

      

  • 相关阅读:
    宠物收养场 Treap
    最佳课题选择
    [USACO08JAN]手机网络Cell Phone Network
    [USACO09MAR]地震损失2Earthquake Damage 2
    字符串距离 简单DP
    小行星群 网络流 二分图
    游览牧场 最小费用流
    BZOJ1391: [Ceoi2008]order
    BZOJ1570: [JSOI2008]Blue Mary的旅行
    BZOJ2243: [SDOI2011]染色
  • 原文地址:https://www.cnblogs.com/lnlvinso/p/10171113.html
Copyright © 2011-2022 走看看