yii2-結(jié)合angularjs實現(xiàn)application/json的post數(shù)據(jù)提交

2019-11-10 19:19:30

字體：大中小

供稿：網(wǎng)友

HTTP/1.1 協(xié)議規(guī)定的 HTTP 請求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 這幾種。其中 POST 一般用來向服務(wù)端提交數(shù)據(jù)，本文主要討論 POST 提交數(shù)據(jù)的幾種方式。我們知道，HTTP 協(xié)議是以 ASCII 碼傳輸，建立在 TCP/ip 協(xié)議之上的應(yīng)用層規(guī)范。規(guī)范把 HTTP 請求分為三個部分：狀態(tài)行、請求頭、消息主體。類似于下面這樣：<method> <request-url> <version><headers> <entity-body></entity-body></headers></version></request-url></method>協(xié)議規(guī)定 POST 提交的數(shù)據(jù)必須放在消息主體（entity-body）中，但協(xié)議并沒有規(guī)定數(shù)據(jù)必須使用什么編碼方式。實際上，開發(fā)者完全可以自己決定消息主體的格式，只要最后發(fā)送的 HTTP 請求滿足上面的格式就可以.但是，數(shù)據(jù)發(fā)送出去，還要服務(wù)端解析成功才有意義。一般服務(wù)端語言如 php、Python 等，以及它們的 framework，都內(nèi)置了自動解析常見數(shù)據(jù)格式的功能。服務(wù)端通常是根據(jù)請求頭（headers）中的 Content-Type 字段來獲知請求中的消息主體是用何種方式編碼，再對主體進(jìn)行解析。所以說到 POST 提交數(shù)據(jù)方案，包含了 Content-Type 和消息主體編碼方式兩部分。POST http://www.example.com HTTP/1.1Content-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；其次，提交的數(shù)據(jù)按照 key1=val1&key2=val2 的方式進(jìn)行編碼，key 和 val 都進(jìn)行了 URL 轉(zhuǎn)碼。大部分服務(wù)端語言都對這種方式有很好的支持。例如 PHP 中，$_POST['title'] 可以獲取到 title 的值，$_POST['sub'] 可以得到 sub 數(shù)組。很多時候，我們用 Ajax 提交數(shù)據(jù)時，也是使用這種方式。例如 JQuery 和 QWrap 的 Ajax，Content-Type 默認(rèn)值都是application/x-www-form-urlencoded;charset=utf-8所以我們都可以方便地在服務(wù)端通過$_POST[]來獲取值。但現(xiàn)在在移動互聯(lián)網(wǎng)的發(fā)展中，特別是終端多樣化，前端的工程化越來越成熟，很多的應(yīng)用使用 Ajax 進(jìn)行數(shù)據(jù)交互之后，我們完全可以定義新的數(shù)據(jù)提交方式，給開發(fā)帶來更多便利。下面要說的就是application/json這種數(shù)據(jù)交換方式。application/json 這個 Content-Type 作為響應(yīng)頭大家肯定不陌生，在服務(wù)端將數(shù)據(jù)以json序列化的方式返回前端。實際上，現(xiàn)在越來越多的人把它作為請求頭，用來告訴服務(wù)端消息主體是序列化后的 JSON 字符串。AngularJS 中的 Ajax 功能，默認(rèn)就是提交 application/json格式。例如下面這段代碼：var data = {'title':'test', 'sub' : [1,2,3]};$http.post(url, data).success(function(result) { ...});最終發(fā)送的請求是：POST http://www.example.com HTTP/1.1Content-Type: application/json;charset=utf-8 {"title":"test","sub":[1,2,3]}這種方案，可以方便的提交復(fù)雜的結(jié)構(gòu)化數(shù)據(jù)，特別適合 RESTful 的接口。各大抓包工具如 Chrome 自帶的開發(fā)者工具、Firebug、Fiddler，都會以樹形結(jié)構(gòu)展示 JSON 數(shù)據(jù)，非常友好。但也有些服務(wù)端語言還沒有支持這種方式，例如 php 就無法通過 $_POST 對象從上面的請求中獲得內(nèi)容。這時候，需要自己動手處理下：在請求頭中 Content-Type 為 application/json 時，從 php://input 里獲得原始輸入流，再 json_decode 成對象。一些 php 框架已經(jīng)開始這么做了。當(dāng)然 AngularJS 也可以配置為使用 x-www-form-urlencoded 方式提交數(shù)據(jù)。如有需要，可以參考我之前寫的一篇bloghttp://blog.csdn.net/u012979009/article/details/52301118下面針對于自己使用的yii2框架，詳細(xì)說明一下如何實現(xiàn)接收application/json格式。yii2在使用restful的api的時候，前端可能會發(fā)送application/json或者text/json，比如上面說的angularjs。我們只需要在配置文件中reauest組件中配置parsers數(shù)組，即可，如下面的紅色部分。'components' => [ 'request' => [ 'csrfParam' => '_csrf-frontend', 'cookieValidationKey' => '1234567', 'parsers' => [ 'application/json' => 'yii/web/JsonParser', 'text/json' => 'yii/web/JsonParser', ], ], .....]

上一篇：Json JsonObject JsonArray

下一篇：1022. D進(jìn)制的A+B (20) PAT乙級