GET与POST的区别?APPLICATION JSON与FORM表单的区别?

一、背景介绍

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

GET和POST是什么?基本概念

GET和POST是 HTTP协议中的两种发送请求的方法。

HTTP又是什么?

HTTP是hypertext transfer protocol(超文本传输协议)的简写, 它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的过程。

客户端连上服务器后,向服务器请求某个web资源,称之为客户端向服务器发送了一个HTTP请求。 一个完整的HTTP请求包括如下内容:一个请求行、若干消息头、以及实体内容

请求方式有:POST、GET、HEAD、OPTIONS、DELETE、TRACE、PUT,常用的有: GET、 POST

来讲人话~POST和GET的事情

邓哥家住在吃鸡村,邓嫂家住在农药屯。邓哥到邓嫂家可以有很多种选择,走着去、驾车去、坐火车去等等。邓哥通常选择驾车过去。
这里吃鸡村和农药屯就相当于是互联网中的两台计算机,邓哥和邓嫂相当于是这两台计算机中的两个程序,这两个程序之间想要通信可以有很多种协议,就好比有很多种交通方式可以到达。我们假设驾车这种方式就是网络中的HTTP协议。
邓哥家有两辆车,一辆轿车,一辆箱式货车。
两种车就好比是HTTP协议中的两种方式,我们假设轿车是GET请求方式,箱式货车是POST请求方式。 
有一天邓哥想接邓嫂来吃鸡村玩,邓哥准备开箱式货车去接邓嫂。 
邓哥要去接邓嫂,就好比程序A要向程序B发出一个请求。从原理上说,无论是轿车还是货车都是车,都能够把人接回来。所以在本质上,GET请求和POST请求都能拉取数据。
这时候,邓哥的父亲(也就是隔壁老王)出来了,说道:“你是不是傻,去接人开轿车多好啊,开货车干嘛?费油不说,没准人家那还不让货车停车呢!” 

既然GET和POST都可以做到拉取数据,那么为什么我们通常拉取数据使用GET而不使用POST呢?

在故事中,隔壁老王不让邓哥开卡车去接邓嫂,那么在现实中,是不是也有一个“隔壁老王”这样的角色在限制我们呢?

答案是:有的!这个现实中的“隔壁老王”就是ISO国际标准化组织,这个组织也说了一堆类似隔壁老王的话,这堆话被称为RFC规范。

所以说,我们常说的HTTP协议实际上是基于RFC规范的,实际上GET和POST请求的语法是完全相同的,但是在RFC规范中,给GET请求和POST请求规定了语义,规定GET用来获取信息,POST用来发送信息。 
当过年的时候,邓哥想要给邓嫂家送一些年货的时候,邓哥按照隔壁老王的嘱咐,开着货车给邓嫂家送年货去了。当然,送过去了一些蔬菜也会稍微拉回来一点水果~ 

这就是按照RFC的规范来执行的,当邓哥想要送年货的时候,就会开货车过去;在互联网环境中,如果想要发送信息就要使用POST方法。
POST方法虽然是发送消息的,但也是有Response的,在请求返回的时候带回来一点数据也是被允许的。

那么这时候问题又来了,邓哥如果不听老王的怎么办?那这个规范不就没有作用了吗?
这个时候老王也是很有办法的,老王就坐在院子门口,如果邓哥想运货出去的时候,开的不是货车就不让出院门~。

光有规范没有具体的软件实施也是没有意义的,所以很多的软件遵从了RFC的规范,比如我们熟悉的Chrome浏览器。
所以我们想用GET方式发送文件或者图片是不可能的~就像邓哥不可能用轿车去给邓嫂送年货一样。

(摘自渡一公众号)

三、常见问题

get与post的区别?

如果什么前提都没有,也就是不用任何规范限制的话,我们只考虑语法来说,这两个方式是没有任何区别的,只有名字不一样。

如果考虑浏览器实现的RFC,或者说Web环境下的RFC的话,那么区别就很明显了。

1.GET方式

1.GET方式是通过URL请求传递用户所输入的内容,其提交的内容会全部显示的浏览器的地址栏中;其安全性很低。如果用户输入的内容包含密码之类的私人信息时很容易被其他人获取。
2.GET方式提交需要用到Request.QueryString来取得变量的值。
3.GET提交具有长度限制,最长不能超过2048字节。
4.GET是从服务器上获取数据。
5.GET是把参数数据队列加到提交表单的action属性所指的URL中,值和表单内容一一对应,在URL中可以看到。
6.在页面重新刷新载入时,没有提示框询问“是否重新发送请求”。
7.在做请求时,GET是将表单内容放到信息的请求头中。

2.POST方式

1.POST提交不会将用户所输入的个人信息显示在浏览器的地址栏中且地址栏中没有什么变化。
2.POST方式提交需要用到Request.Form来取得变量的值。
3.POST没有提交长度限制。
4.POST是向服务器传送数据。
5.POST是通过HTTP post机制,将表单内容 中各个字段与其内容旋转在HTML HEADER内一起传送到action属性所批的URL地址。用户是看不到这一过程的。
6.在页面重新刷新载入时,会有提示框询问“是否重新发送请求”。

3.幂等

先介绍下幂等的概念:如果一个操作没有副作用,或者多次操作对资源产生的副作用相同,我们就说这个操作是幂等的。
get方法用户获取资源,没有副作用,所以是幂等的;post用于创建资源,是有副作用的,且副作用不同,所以post不是幂等的。(两次相同的POST请求会在服务器端创建两份资源,它们具有不同的URI)

GET&POST

上图是在W3C上找到的答案。


总结一下:
1.GET在浏览器回退时是无害的,而POST会再次提交请求。
2.GET产生的URL地址可以被Bookmark,而POST不可以。
3.GET请求会被浏览器主动cache,而POST不会,除非手动设置。
4.GET请求只能进行url编码,而POST支持多种编码方式。
5.GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。
6.GET请求在URL中传送的参数是有长度限制的,而POST没有。
7.对参数的数据类型,GET只接受ASCII字符,而POST没有限制。
8.GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。
9.GET参数通过URL传递,POST放在Request body中。

 

四、解决方案

 

五、编码实战

六、扩展思考

APPLICATION JSON与FORM 是什么?

协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。 实际上,我们完全可以自己决定消息主体的格式,只要最后发送的 HTTP 请求满足上面的格式就可以。

Content-Type的类型有很多种:可以参考对照表。

这里常用的两种类型:application/x-www-form-urlencoded 和 application/json

 

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单,如果不设置 enctype 属性, 那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样:

APPLICATION/JSON

application/json 这个 Content-Type 作为响应头大家肯定不陌生。
实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。 由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify, 服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。 JSON 格式支持比键值对复杂得多的结构化数据,这一点也很有用。 Google 的 AngularJS 中的 Ajax 功能,默认就是提交 JSON 字符串。

7.参考文献

参考一:get和post区别?—— 知乎

参考二:HTTP 方法:GET 对比 POST

参考三:《邓哥奇遇记7》—— GET与POST的真正区别

8.更多讨论

 

application json 与form表单的区别?

application/json
随着json规范的越来越流行,并且浏览器支持程度原来越好,许多开发人员以application/json作为请求content-type,告诉服务器请求的主题内容是json格式的字符串,服务器端会对json字符串进行解析,这种方式的好处就是前端人员不需要关心数据结构的复杂度,只要是标准的json格式就能提交成功,application/json数据格式越来越得到开发人员的青睐。

application/x-www-form-urlencoded方式
是Jquery的Ajax请求默认方式,这种方式的好处就是浏览器都支持,在请求发送过程中会对数据进行序列化处理,以键值对形式?key1=value1&key2=value2的方式发送到服务器,如果用Jquery,它内部已经进行了处理,如果自己写原生的Ajax请求,就需要自己对数据进行序列化。

GET和POST使用环境?

应该符合语义的使用;即获取数据使用GET,增加数据使用POST。
当请求无副作用时(如进行搜索),便可使用GET方法;当请求有副作用时(如添加数据行),则用POST方法。

关于put 和 delete 请求?

PUT:上传指定的 URI 表示。

DELETE:删除指定资源。

PUT,DELETE操作是幂等的。

 

 

  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: Vue.js 是一个 JavaScript 框架,使用它可以方便地进行前端开发。vue-resource 是 Vue.js 的一个插件,可以用来发送 HTTP 请求。 关于请求类型,vue-resource 支持 POST 和 GET 两种请求方式。使用方式如下: - GET 请求: ```javascript this.$http.get('your_api').then(response => { // success callback }, response => { // error callback }); ``` - POST 请求: ```javascript this.$http.post('your_api', { // request body }).then(response => { // success callback }, response => { // error callback }); ``` 关于请求格式,vue-resource 支持 form 和 json 两种格式。默认情况下,vue-resource 会将请求体序列化为 application/x-www-form-urlencoded 格式,如果需要发送 json 格式的请求,需要手动设置请求头: ```javascript this.$http.post('your_api', { // request body }, { headers: { 'Content-Type': 'application/json' } }).then(response => { // success callback }, response => { // error callback }); ``` ### 回答2: vue-resource 是 Vue.js 的一个插件,用于发送 HTTP 请求。在 Vue.js 中发送 POST 和 GET 请求可以使用 vue-resource 的形式处理。下面是一个例子,展示如何用 vue-resource 进行 POST 和 GET 请求,发送 Form 表单数据和 JSON 数据。 发送 POST 请求: 1. 使用 vue-resource 的 $http.post() 方法发送 POST 请求。 2. 将要发送的数据作为参数传递给 $http.post() 方法。 3. 如果要发送 Form 表单数据,可以将数据作为对象传递给 $http.post() 方法。 4. 如果要发送 JSON 数据,需要在请求头中设置 Content-Type 为 application/json,并将 JSON 数据作为字符串传递给 $http.post() 方法。 下面是使用 vue-resource 发送 POST 请求的示例: ``` js // 发送 Form 表单数据 this.$http.post('api/url', {param1: value1, param2: value2}).then((response) => { // 处理成功的回调 }).catch((error) => { // 处理失败的回调 }); // 发送 JSON 数据 let jsonData = JSON.stringify({param1: value1, param2: value2}); this.$http.post('api/url', jsonData, {headers: {'Content-Type': 'application/json'}}).then((response) => { // 处理成功的回调 }).catch((error) => { // 处理失败的回调 }); ``` 发送 GET 请求: 1. 使用 vue-resource 的 $http.get() 方法发送 GET 请求。 2. 将要发送的数据作为参数传递给 $http.get() 方法。 3. 参数可以直接拼接在 URL 中,也可以作为一个对象传递给 $http.get() 方法。 下面是使用 vue-resource 发送 GET 请求的示例: ``` js // 直接拼接参数在 URL 中 this.$http.get('api/url?param1=value1&param2=value2').then((response) => { // 处理成功的回调 }).catch((error) => { // 处理失败的回调 }); // 作为参数对象传递 this.$http.get('api/url', {params: {param1: value1, param2: value2}}).then((response) => { // 处理成功的回调 }).catch((error) => { // 处理失败的回调 }); ``` 以上就是使用 vue-resource 发送 POST 和 GET 请求时,发送 Form 表单数据和 JSON 数据的方法。 ### 回答3: Vue-resource是Vue.js官方推荐的一个用于处理网络请求的插件。使用Vue-resource可以很方便地进行post和get请求,并且可以以form和json的形式进行数据传输。 首先,我们来讲解如何进行post请求。在Vue组件中,可以通过Vue-resource的$http对象来发送post请求。要发送一个form形式的post请求,可以使用`this.$http.post(url, formData)`方法,并将form数据作为第二个参数传递进去。 例如,假设我们要向服务器端发送一个form形式的post请求,可以通过以下代码实现: ``` this.$http.post('/api/users', this.formData).then(response => { console.log(response.body); }, error => { console.error(error); }); ``` 其中,`/api/users`是请求的url,`this.formData`是包含form数据的对象。通过`then`方法可以处理请求成功和失败的情况,并且可以从`response`对象中获取到服务器返回的数据。 下面我们来看一下如何进行get请求。同样地,在Vue组件中,可以通过Vue-resource的$http对象来发送get请求。要发送一个json形式的get请求,可以使用`this.$http.get(url, {params: jsonData})`方法,并将json数据作为`params`属性传递进去。 举一个例子,如果我们需要向服务器端发送一个json形式的get请求,可以按照以下方式实现: ``` this.$http.get('/api/users', {params: {name: 'Alice', age: 25}}).then(response => { console.log(response.body); }, error => { console.error(error); }); ``` 在这个例子中,`/api/users`是请求的url,`{name: 'Alice', age: 25}`是需要传递给服务器的json数据。同样地,在`then`方法中可以处理请求成功和失败的情况,并且从`response`对象中获取到服务器返回的数据。 总之,使用Vue-resource可以轻松地发送post和get请求,并且可以自由选择传递form或json形式的数据。以上就是关于如何使用Vue-resource进行post和get请求的简要说明。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值