AngularJSの$http.post()のメモ

今年に入ってから「流行りものに手を出してみよう」ということで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}; #これで目的のものが取れる!

AngularJSアプリケーション開発ガイド

---

Vita用のソフトは何本か買ってみたのだけど、最近は『地球防衛軍３Portable』ついついばっかりやってしまう。

地球防衛軍 3 PORTABLE

それほど敵に動作にバリエーションはないけれど、ボリュームはあるしアンロックされる武器もいっぱいあって、TPSとして楽しい要素をしっかり抑えている。

１ステージだけってつもりでやってたら、気づいたら夜になってたりするから恐ろしい。