100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 常见的POST提交数据方式

常见的POST提交数据方式

时间:2019-01-29 06:10:39

相关推荐

常见的POST提交数据方式

HTTP的请求方法POST是再常见不过的了,这里详细地说明四种常用的提交数据方案,巩固下基础。

在说POST之前,先看下HTTP请求的结构,分为三个部分:状态行、请求头、消息主体

<method> <request-URL> <version>

<headers>

<entity-body>

我们在代码中,通过new一个XMLHttpRequest实例时,就是创建了一个http请求,然后我们会指定使用GET、POST、UPDATE、DELETE等方法,以及请求的URL地址。对于POST而言,数据是放在消息主体中,但是并没有规定必须使用什么编码,我们可以自己决定消息主体的格式。

请求发送到服务端,需要服务端解析成功才有用。通常,是根据请求头中的Content-Type字段来判断消息主体用的是哪种方式编码,再对主体进行解析。所以,POST提交数据,涉及到Content-Type和消息主体编码方式两部分。

1.application/x-www-form-urlencoded

这是最常见的POST提交数据的方式了。原生的form表单,如果不设置enctype属性,最终就是以application/x-www-form-urlencoded方式提交数据。类似:

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

提交的数据按照key1=val1&key2=val2的方式进行编码,key和val都进行了转码。很多封装的库中的ajax请求,也是默认使用这种方式,jquery和axios

2.multipart/form-data

也是一种常见的POST提交方式,在使用表单上传文件时,必须让form表单的enctype等于multipart/form-data

POST HTTP/1.1Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA------WebKitFormBoundaryrGKCBY7qhFd3TrwAContent-Disposition: form-data; name="text"title------WebKitFormBoundaryrGKCBY7qhFd3TrwAContent-Disposition: form-data; name="file"; filename="chrome.png"Content-Type: image/pngPNG ... content of chrome.png ...------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

这种方式一般用于上传二进制文件,例如图像、视频这种。

3.application/json;charset=utf-8

POST提交json格式的数据,告诉服务器消息主体是序列化后的JSON字符串。支持比键值对更加复杂的结构化数据。

ajax: {url: '/users/login_success',method: 'POST',data: function(){return JSON.stringify({"phone": phone.value,"password": password.value})},success: function(res){console.log(res);},}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。