四种常见的post请求中的参数形式

古城微笑少年丶 2022-04-10 14:11 498阅读 0赞

四种常见的post请求中的参数形式

post请求中的参数形式  
一、初识post请求实例  
1、Angular的ajax功能

AngularJs的ajax的post请求参数就是提交的json字符串。如：

var data = {'name':'jack'};
    $http.post(url,data).success(function(rsp){
        //    code
     })

2、application/json

JSON.stringify（）的方法，服务端也有处理JSON的函数。

//请求的参数要处理：

JSON.stringify({name:'jack'})

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW90YXRh_size_16_color_FFFFFF_t_70]

图片描述  
二、四种常见的post请求方式：  
1、背景

注：enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为 “application/x-www-form-urlencoded”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW90YXRh_size_16_color_FFFFFF_t_70 1]

图片描述

（1）、HTTP 协议是以 ASCII 码 传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。  
（2）、协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须 使用什么编码方式 。实际上，开发者完全可以自己决定消息主体的格式，只要最后发送的 HTTP 请求满足上面的格式就可以。  
（3）、数据发送出去，还要服务端解析成功才有意义。一般服务端语言如 php、python 等，以及它们的 framework，都内置了自动解析常见数据格式的功能。服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。  
2、开始介绍四种方式：

（1）、application/x-www-form-urlencoded  
这应该是最常见的 POST 提交数据的方式了。浏览器的原生 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。

<form action="form_action.asp" enctype="text/plain">
      <p>First name: <input type="text" name="fname" /></p>
      <p>Last name: <input type="text" name="lname" /></p>
      <input type="submit" value="Submit" />
    </form>

此时可以看到，

Content-Type: application/x-www-form-urlencoded;charset=utf-8  
title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

首先，Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式很好的支持，常用的如jQuery中的ajax请求，Content-Type 默认值都是「application/x-www-form-urlencoded;charset=utf-8

（2）、multipart/form-data  
这也是常见的post请求方式，一般用来上传文件，各大服务器的支持也比较好。所以我们使用表单 上传文件 时，必须让表单的enctype属性值为 multipart/form-data.

注意：以上两种方式：application/x-www-form-urlencoded和multipart/form-data都是浏览器原生支持的。

（3）、application/json  
application/json作为响应头并不陌生，实际上，现在很多时候也把它作为请求头，用来告诉服务端消息主体是序列化的JSON字符串，除了低版本的IE，基本都支持。除了低版本的IE都支持JSON.stringify（）的方法，服务端也有处理JSON的函数，使用json不会有任何麻烦。例如：

//请求数据
    var data = {name:'jack',sex:'man'};
    //请求数据序列化处理
    JSON.stingify(data);

//结果：\{‘name’:‘jack’,‘sex’:‘man’\};

(4)、text/xml  
三、postman中post请求的form-data、x-www-form-urlencoded、raw、binary的区别

1、form-data：  
等价于http请求中的multipart/form-data,它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。当上传的字段是文件时，会有Content-Type来表名文件类型；content-disposition，用来说明字段的一些信息；  
由于有boundary隔离，所以multipart/form-data既可以上传文件，也可以上传键值对，它采用了键值对的方式，所以可以上传多个文件。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW90YXRh_size_16_color_FFFFFF_t_70 2]  
图片描述

2、x-www-form-urlencoded：  
等价于application/x-www-from-urlencoded,会将表单内的数据转换为键值对，比如,name=java&age = 23  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW90YXRh_size_16_color_FFFFFF_t_70 3]  
图片描述

3、raw  
可以上传任意格式的文本，可以上传text、json、xml、html等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW90YXRh_size_16_color_FFFFFF_t_70 4]  
图片描述

4、binary  
相当于Content-Type:application/octet-stream,从字面意思得知，只可以上传二进制数据，通常用来上传文件，由于没有键值，所以，一次只能上传一个文件。

multipart/form-data与x-www-form-urlencoded区别  
multipart/form-data：既可以上传文件等二进制数据，也可以上传表单键值对，只是最后会转化为一条信息；  
x-www-form-urlencoded：只能上传键值对，并且键值对都是间隔分开的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW90YXRh_size_16_color_FFFFFF_t_70]: /images/20220328/f3abb053c6514723a09e224807e44b71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW90YXRh_size_16_color_FFFFFF_t_70 1]: /images/20220328/95ab23cc62394d839325292303320db5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW90YXRh_size_16_color_FFFFFF_t_70 2]: /images/20220328/4d9bbacc2f4b480dbd85765c234ebed6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW90YXRh_size_16_color_FFFFFF_t_70 3]: /images/20220328/58a03b66c57a4ac8b6302471511509dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW90YXRh_size_16_color_FFFFFF_t_70 4]: /images/20220328/2253588114fb41eeb16635b52b9c7798.png