yii2-结合angularjs实现application/json的post数据提交

2/10/2017来源:ASP.NET技巧人气:744

HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种方式。 我们知道,HTTP 协议是以 ASCII 码传输,建立在 TCP/ip 协议之上的应用层规范。规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。类似于下面这样: <method> <request-url> <version> <headers>   <entity-body></entity-body></headers></version></request-url></method> 协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。实际上,开发者完全可以自己决定消息主体的格式,只要最后发送的 HTTP 请求满足上面的格式就可以. 但是,数据发送出去,还要服务端解析成功才有意义。一般服务端语言如 php、Python 等,以及它们的 framework,都内置了自动解析常见数据格式的功能。服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。所以说到 POST 提交数据方案,包含了 Content-Type 和消息主体编码方式两部分。 POST http://www.example.com HTTP/1.1 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 转码。大部分服务端语言都对这种方式有很好的支持。例如 PHP 中,$_POST['title'] 可以获取到 title 的值,$_POST['sub'] 可以得到 sub 数组。 很多时候,我们用 Ajax 提交数据时,也是使用这种方式。例如 JQuery 和 QWrap 的 Ajax,Content-Type 默认值都是application/x-www-form-urlencoded;charset=utf-8 所以我们都可以方便地在服务端通过$_POST[]来获取值。 但现在在移动互联网的发展中,特别是终端多样化,前端的工程化越来越成熟,很多的应用使用 Ajax 进行数据交互之后,我们完全可以定义新的数据提交方式,给开发带来更多便利。 下面要说的就是application/json这种数据交换方式。 application/json 这个 Content-Type 作为响应头大家肯定不陌生,在服务端将数据以json序列化的方式返回前端。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。 AngularJS 中的 Ajax 功能,默认就是提交 application/json格式。例如下面这段代码: var data = {'title':'test', 'sub' : [1,2,3]}; $http.post(url, data).success(function(result) {     ... }); 最终发送的请求是: POST http://www.example.com HTTP/1.1 Content-Type: application/json;charset=utf-8   {"title":"test","sub":[1,2,3]} 这种方案,可以方便的提交复杂的结构化数据,特别适合 RESTful 的接口。各大抓包工具如 Chrome 自带的开发者工具、Firebug、Fiddler,都会以树形结构展示 JSON 数据,非常友好。但也有些服务端语言还没有支持这种方式,例如 php 就无法通过 $_POST 对象从上面的请求中获得内容。这时候,需要自己动手处理下:在请求头中 Content-Type 为 application/json 时,从 php://input 里获得原始输入流,再 json_decode 成对象。一些 php 框架已经开始这么做了。 当然 AngularJS 也可以配置为使用 x-www-form-urlencoded 方式提交数据。如有需要,可以参考我之前写的一篇blog http://blog.csdn.net/u012979009/article/details/52301118 下面针对于自己使用的yii2框架,详细说明一下如何实现接收application/json格式。 yii2在使用restful的api的时候,前端可能会发送application/json或者text/json,比如上面说的angularjs。我们只需要在配置文件中reauest组件中配置parsers数组,即可,如下面的红色部分。 'components' => [         'request' => [             'csrfParam' => '_csrf-frontend',             'cookieValidationKey' => '1234567',             'parsers' => [                 'application/json' => 'yii\web\JsonParser',                 'text/json' => 'yii\web\JsonParser',             ],         ],     ..... ]