Ajax的post请求参数request payload和form data区别是什么?

Daotin 于 2021-12-30 发布 编辑
  1. 两者有什么区别?
  2. 在使用ajax的时候如何配置?
  3. 关于contentType的区别

今天在调用后端接口传递参数的时候,后端说传的参数格式不对,需要传的是一个对象的类型格式。

于是,我看了下传递参数的样式,有两种:

image image

可以看到,一个叫 Form Data(表单数据),一个叫 Request Payload(请求负载),中文就是表单数据和请求负载。

那么:

1、两者有什么区别?

2、在使用ajax的时候如何配置?

两者有什么区别?

下面来自stackoverflow的高赞回答:

链接:https://stackoverflow.com/questions/23118249/whats-the-difference-between-request-payload-vs-form-data-as-seen-in-chrome

请求有效载荷–或者更准确地说:HTTP请求的有效载荷体–是通常由POST或PUT请求发送的数据。它是HTTP请求的头部和CRLF之后的部分。

一个 Content-Type: application/json 的请求可能是这样的。

POST /some-path HTTP/1.1
Content-Type: application/json

{ "foo" : "bar", "name" : "John" }

如果你按AJAX提交这个,浏览器就会简单地显示出它作为有效载荷体提交的内容。这就是它所能做的,因为它不知道数据来自哪里。

如果你提交一个 method="POST"Content-Type: applicationx-www-form-urlencodedContent-Type: multipart/form-data 的HTML-Form,你的请求可能看起来像这样:

POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencoded

foo=bar&name=John

在这种情况下,请求的是表单数据form-data 类型的载荷。在这里,浏览器知道的更多:它知道bar是提交表单的输入字段foo的值。这就是它向你显示的内容。

所以,它们在Content-Type上有所不同,但在提交数据的方式上并无不同。在这两种情况下,数据都在消息体中。而Chrome浏览器在开发者工具中区分了数据是如何呈现给你的。

总结:表单数据是有更具体含义的请求载荷。当浏览器不知道更多信息时,它就会显示为Request Payload,当它知道更多信息时(比如它知道bar是提交表单的输入字段foo的值。),就会显示Form Data

在使用ajax的时候如何配置?

如果是表单数据,你的ajax请求参数是这样的:

$.ajax({
    url: "/web/VerifyLogin",
    type: "post",
    dataType: "json",
    data: {
        tel: tel, //发送手机号
        formid: me.fid, //对应的试卷id
    },
    success: function (res) {
        console.log('res----->', res);
    }
});

如果 contentType 不填的话,默认值为application/x-www-form-urlencoded,参数类型就是表单数据form Data

$.ajax contentType 和 dataType , contentType 主要设置你发送给服务器的格式,dataType设置你收到服务器数据的格式。

如果我们想要Request Payload的形式,我们需加入contentType: 'application/json; charset=UTF-8',向后台发送数据的格式必须为json字符串,于是加入了JSON.stringify,如下代码。

$.ajax({
    url: "/web/VerifyLogin", // 验证手势正确性,如果正确会请求验证码
    type: "post",
    dataType: "json",
    contentType: 'application/json; charset=UTF-8',
    data: JSON.stringify({
        tel: tel, //发送手机号
        formid: me.fid, //对应的试卷id
    }),
    success: function (res) {
        console.log('res----->', res);
    }
});

关于contentType的区别

contentType 默认为application/x-www-form-urlencoded,这种格式的特点就是,name/value 成为一组,每组之间用 & 联接,而 name与value 则是使用 = 连接。如: www.baidu.com/query?user=username&pass=password 这是get请求, 而 post 请求则是使用请求体,参数不在 url 中,在请求体中的参数表现形式也是: user=username&pass=password的形式。

使用这种contentType时,对于简单的json对象类型,如:{“a”:1,”b”:2,”c”:3} 这种,将也会被转成user=username&pass=password 这种形式发送到服务端。而服务端接收时就按照正常从from表单中接收参数那样接收即可,不需设置@RequestBody之类的注解。

但对于复杂的json 结构数据,这种方式处理起来就相对要困难,服务端解析时也难以解析,所以,就有了application/json 这种类型,这是一种数据格式的申明,明确告诉服务端是什么格式的数据,服务端只需要根据这种格式的特点来解析数据即可。

参考文档:https://www.cnblogs.com/nizuimeiabc1/p/11030159.html

(完)