常见的四种post提交数据编码格式
HTTP/1.1 协议规定的 HTTP 请求⽅法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这⼏种。
其中 POST ⼀般⽤来向服务端提交数据，具体到项⽬中，前后端交互时必须⾸先约定编码⽅式，本⽂主要讨论 POST 提交数据的⼏种编码⽅式。
POST请求的编码⽅式
HTTP协议规定 POST 提交的数据必须放在消息主体（body）中，但协议并没有规定数据必须使⽤什么编码⽅式。
服务端通常是根据请求头headers中的 Content-Type 字段来获知请求中的消息主体是⽤何种⽅式编码，再对body进⾏解析。
所以⽤post⽅法提交数据，必须指定Content-Type头，如果不指定，浏览器会添加默认的Content-Type头。
⽬前常见的 POST 提交数据⽅式见下
1. application/x-www-form-urlencoded
form表单提交，⾃动添加Content-Type头
html中的form标签可以实现表单提交数据，form的enctype属性⽤于设置编码⽅式，默认值为application/x-www-form-urlencoded，发送请求时Content-Type头为application/x-www-form-urlencoded
<form action="/api/login"method="post"enctype="application/x-www-form-urlencoded">
<p>⽤户名: <input type="text"name="username"value="admin"></p>
<p>密码: <input type="test"name="password"value="123456"></p>
<input type="submit"value="登录">
</form>
form的enctype属性值
值描述
application/x-www-form-urlencoded在发送前编码所有字符（默认）
multipart/form-data不对字符编码，在使⽤包含⽂件上传控件的表单时，必须使⽤该值。
text/plain空格转换为 “+” 加号，但不对特殊字符编码。
Ajax 提交数据，⼿动设置Content-type
var xhr=new XMLHttpRequest();
xhr.open("POST","www.fastmock.site/mock/d6b39fde63cbe98a4f2fb92ff5b25a6d/api/add",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
2、multipart/form-data
编码⽅式为 multipart/form-data时需要⾸先在HTTP请求头设置⼀个分隔符，即：boundary的属性值，然后，将每个字段⽤分隔符分隔，最后⼀个分隔符表⽰结束。
数据将被编码为⼀条消息，由于存在分隔符，既可以上传键值对，也可以上传⽂件，通常⽤于上传⼆进制的⽂件。
form表单提交
如果使⽤表单上传⽂件，需要将表单的enctype设置为multipart/form-data
<form action="/api/upload"method="post"enctype="multipart/form-data">
<input type="file"name="thumbnail">
<input type="test"name="caption">
<input type="submit"value="提交">
</form>
可以在js中创建⼀个FormData对象提交数据，使⽤ FormData对象，浏览器会⾃动识别并添加请求头 Content-Type: multipart/form-data
下⾯是⼀个带预览功能的上传图⽚的例⼦：
<div>
<img src=""id="img">
<input type="file"id="thumbnail">
<button id="btn">上传</button>
</div>
<script>
var ElementById("btn");
var file = ElementById('thumbnail');
var img = ElementById('img');
//图⽚预览
file.addEventListener('change',function(event){
var uploadFile = event.target.files[0]
if(uploadFile){
var reader =new FileReader();// 创建流对象
}
img.src = sult
}
})
//图⽚上传
btn.addEventListener('click',function(){
var formData =new FormData();
formData.append("caption","缩略图");
url编码处理formData.append('thumbnail', file.files[0]);
var xhr=new XMLHttpRequest();
xhr.open("POST","localhost:5000/api/upload");
xhr.send(formData);
})
}
</script>
3、application/json
⽬前常⽤的Content-Type类型，⽤来告诉服务端消息主体是序列化后的 JSON 字符串。⼀些前端框架中post请求默认采⽤这种编码⽅式。前端⽆法将表单的enctype属性指定为application/json，通常使⽤ajax的⽅式发送这种编码形式的请求。
var xhr=new XMLHttpRequest();
xhr.open("POST","/api/",true);
xhr.setRequestHeader("Content-Type","application/json");
xhr.send(JSON.stringify({"login_name":"test","login_password":"123456"}));
ajax发送上述三种编码格式的区别
var xhr1 =new XMLHttpRequest();
xhr1.open("POST","localhost:5000/api/users/login",true);
xhr1.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr1.send("login_name=test&login_password=123456");
var xhr2 =new XMLHttpRequest();
var formData =new FormData();
formData.append("login_name","test");
formData.append("login_password","123456");
xhr2.open("POST","localhost:5000/api/users/login",true);
xhr2.send(formData);
var xhr3 =new XMLHttpRequest();
xhr3.open("POST","localhost:5000/api/users/login",true);
xhr3.setRequestHeader("Content-Type","application/json");
xhr3.send(JSON.stringify({"login_name":"test","login_password":"123456"}));

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。