今年に入ってから「流行りものに手を出してみよう」ということでAngularJSをよく使うようになったのだが、最近ではもはや理由がない限りは使うのがデフォって位に僕の中では無くてはならない存在になってきた。
昨今のブラウザ側にある程度データを持たせてガリガリいじるような設計の場合、生のJavascriptなりjQueryなりで作ると内部的なデータと実際の画面表示とで状態を同期するのが一丁面倒だったりする。
そのへんデータバインディングの恩恵に与ることで凄く生産性が上がるのである。
さて本題。
AngularJSでは$http.post()によってPOSTでデータを送信することはできるのだが、これをjQueryの$.post()のつもりで使おうとすると、なぜかサーバ側で上手く取得できなくて面食らうことになる。
#ブラウザ側 $http.post('/api', {test:1}); #"test"って要素に"1"って入れて送ってみるじゃん
#サーバ側(今回はMojolicious::Liteで) $self->param('test');#これでは"1"が取れない!!
結論から言えば、AngularJSの$http.post()はformのinput要素のような形で送信するものではなくて、application/x-www-form-urlencoded
が付かないからJSONのまんま自動では展開されないのが原因。
jQueryのやつっぽく使いたい場合
無理くりjQueryライクにやりたければ、細かい設定を入れて$http()使えばよい。
$http( { url:"/api", method:"POST", data:{test:1} headers: {'Content-Type': 'application/x-www-form-urlencoded'} } )
https://docs.angularjs.org/api/ng/service/$http
(そもそもAngularJSとjQueryは共存できるので、そこだけjQuery使う方がベターな気がするけど・・・)
Mojolicious::Liteで受け取る
とはいえ最新のフレームワークがわざわざこんな形で送ってるのは当然理由がある。
普通にpostした場合は一次の連想配列でカバーできる形式のデータしか送れないわけで、複雑な構造のデータを扱いたい場合は何かと工夫が必要となるのだが、JSON形式でならばそのあたりの面倒がない。
そんなわけで、ちゃんと$http.post()で送った物を取ってみる。
要はリクエストボディを取得してJSONでデコードしてやりゃ良い。
個人的に専ら良く使っているPerlフレームワークMojolicious::Liteには初めっから便利なものが用意されている。
my $data = $self->req->json; $data->{test}; #これで目的のものが取れる!
- 作者: Brad Green,Shyam Seshadri,牧野聡
- 出版社/メーカー: オライリージャパン
- 発売日: 2014/04/18
- メディア: 大型本
- この商品を含むブログ (1件) を見る
Vita用のソフトは何本か買ってみたのだけど、最近は『地球防衛軍3Portable』ついついばっかりやってしまう。
- 出版社/メーカー: D3PUBLISHER
- 発売日: 2012/09/27
- メディア: Video Game
- 購入: 3人 クリック: 13回
- この商品を含むブログ (12件) を見る
それほど敵に動作にバリエーションはないけれど、ボリュームはあるしアンロックされる武器もいっぱいあって、TPSとして楽しい要素をしっかり抑えている。
1ステージだけってつもりでやってたら、気づいたら夜になってたりするから恐ろしい。