前端常见提交数据方式对比

前言

        目前的前后端的界限越来越明显，当然，其实现通信的方式主要就是通过Http协议完成。但是在这个过程中，提交数据的格式有时候不同确实是让后端比较头疼的问题，那么，阿福就来总结下常用的提交数据的方式有哪些？

常见的前端提交数据方式

part1、Get方式 放在URL中

        这种方式我们直接是把请求的参数放在URL中的，给大家一个示例参考下：

https://www.baidu.com/s?wd=tets&rsv_spt=1&rsv_iqid=0xb343812e0083a195&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=5&rsv_sug1=2&rsv_sug7=100&rsv_sug2=0&inputT=876&rsv_sug4=1754

---

        实际上，这里的话首先是一个问号，然后按照键值对的形式分割。

part2、Post方式 常用表单方式（application/x-www-form-urlencoded）

        之所以说这种方式是默认的是因为你在使用ajax提交数据的时候如果不指定的话就会默认采用这种形式。当然，这种方式的特点就是将所有的数据变成键值对的形式存放在Request的Body中。但是需要说明的是，这种方式是不支持文件上传的。

part3、 Post方式 支持文件上传（multipart/form-data）

        这种方式需要强调的一点就是它支持文件的上传，这个是非常重要的。当然，要使用这种格式的话，你必须注意解析的方式。其将会把窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。也就是说，如果有 type=file 的话，就要用到 multipart/form-data 了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file)、Content-Type(默认为text/plain)、name(控件name)等信息，并加上分割符(boundary)。

part4、 Post方式 json提交（application/json）

        好吧，不得不说明的一点是这应该是后端最喜欢的方式，爱他就用他的方式。啊哈哈
        这种方式就是在ajax提交的时候，在type上注明application/json。这样的话就会把你所提交的信息吧变成json提交上去。简直完美有莫有！

Post和Get方式的区别

        阿福必须放出多年压箱底的宝贝了！哈哈

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。 在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

总结

        不得不说，前端提交数据的方式真的是非常之多，当然，restful常用的就是2/4两种方式。最常用且后端最喜欢的也就是4.真的，如果可能，请尽量用4.不要让后端的同学在数据解析上纠结了！还得取得parmeterMap来判断一下是否为空！感谢！