HTTP请求中 request payload 和 formData 区别？

最新推荐文章于 2025-10-13 10:24:14 发布

转载最新推荐文章于 2025-10-13 10:24:14 发布 · 3.8k 阅读

前端专栏收录该内容

9 篇文章

订阅专栏

博客介绍了FormData和Payload是浏览器传输给接口的两种格式，浏览器通过Content-Type区分。若为application/x-www-form-urlencoded则是formdata方式，application/json或multipart/form-data则是request payload方式，还举例说明了不同编码方式下的使用情况。

转载自：https://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>

复制代码

如下图所示