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编码):

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  7. <script type="text/javascript" src="https://tugenhua0707.github.io/html5UploadImage/js/jquery.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <div class="btn">发送post请求</div>
  12. </div>
  13. <script>
  14. var obj = {
  15. "name": 'CntChen',
  16. "info": 'Front-End',
  17. };
  18. $('.btn').click(function() {
  19. $.ajax({
  20. url: 'www.example.com',
  21. type: 'POST',
  22. dataType: 'json',
  23. data: obj,
  24. success: function(d) {
  25. }
  26. })
  27. });
  28. </script>
  29. </body>
  30. </html>
  1. 使用 multipart/form-data表单上传文件
    如下html代码:
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title></title>
    5. <meta charset="utf-8">
    6. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    7. </head>
    8. <body>
    9. <div id="app">
    10. <form action="http://www.example.com" method="POST" enctype="multipart/form-data">
    11. <p>username: <input type="text" name="fname" /></p>
    12. <p>age: <input type="text" name="age" /></p>
    13. <input type="submit" value="提交" />
    14. </form>
    15. </div>
    16. </body>
    17. </html>

可以看到 使用multipart/form-data表单上传文件时使用的是 Request Payload 格式;

  1. 使用 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>

感谢以下朋友的文章。
转载:https://www.cnblogs.com/tugenhua0707/p/8975615.html

分类: 小程序

标签:   小程序