Angular.js の $http から、PHP の $_POST で普通に受け取れるようにPOSTする方法

ネットショップのプログラミング
2015.03.21

最近は、通販サイトを作る際にも積極的に Angular.js 使用しています。
時々、フォームの送信ボタンをクリックしたときと同じようにデータをPOSTしたいことがありまして、その方法をメモしておきます。

通販サイトで Angular.js を活用してます

  • 画面遷移を伴わずに商品の数量を変更したり削除したい！
  • 商品ごとにカスタマイズしたオーダーフォームを使いたい！
  • 選択項目によって変化していく注文フォームを実現したい！
  • オプションによって金額も連動する注文フォームを使いたい！

などというような気が遠くなりそうな要望に対しても、Angular.js を活用すればサラリとスマートに実現できてしまいます。

現在製作中の通販サイトのオーナーさんは、商品をカートに入れる際に商品ごとにお届け日をカレンダーで指定できるようにしたいという要望があったのですが、一般的な注文フォームしか扱ったことのない製作会社に相談すれば、「出来ない」とか「出来るけどその予算の２０倍くらい費用がかかりますよ」とか言われて途方に暮れていたことでしょう。

僕のところに話が流れてきたときに、「あ、出来ますよ。」と即答できたのは Angular.js のおかげといえましょう。

Angular.js は、javascriptで動くフレームワークです。javascriptがOFFになっている環境では動作しません。

以前はセキュリティ上の懸念から Javascript をOFFにしてる人が少なからずいらっしゃったのですが、最近は Gmailを筆頭に Javascript を利用したリッチなサイトが当たり前に存在しており、もしOFFにしていたら不便極まりない状況となっています。こうした状況は、Angular.js を始めとするjavascriptフレームワークにとって追い風となっています。

なんだか前書きが長くなってしまいましたが、本題に進みましょう。

Angular.js の $http から普通にPOSTする方法

会員登録制サイトの案件でアカウント管理に PEAR/AUTH を利用しようとしたのですが、Angular.js を併用していますと具合が良くありません。

Angular.js は複数の階層を持つ配列データを簡単に送受信するために、データを json 形式に変換してから送出する仕様になっているため、例えば PHPの場合$_POST変数からデータを受け取ることが出来ません。

（いろいろなブログでこの仕様に対するいちゃもんを目にしますが、複数階層の配列を簡単に送受信できるのは、本当にめちゃくちゃ便利だと思います。なぜそのような仕様になっているのかをろくに推察もせず、「クソ仕様だ」などど否定的な発言をしたりしますと、結局のところ自分の評価を落とすことになりますので、十分に気を付けたいところであります。）

Angular.js の標準様式ではなく、通常のフォームと同じようにデータを送信するには、以下のように headers パラメータの追加とデータのシリアライズ化をしてやればOKです。
（この例では、シリアライズするのに jQuery の param コマンドを利用しています。）

$http({
    url: "hogehoeg.php",
    method: "POST",
    data: $.param({ user: user, passwd: passwd }),
    headers: { "Content-Type": "application/x-www-form-urlencoded" }
})

Angular.js を使うことで、どのページにいてもログインフォームがポップアップしてその場でログインできて、その結果が即座に画面上に反映されるなんてこともサクサクと実現できます。

ユーザーにとって分かりやすく、開発もしやすい（※）ので、通販サイトにこそ Angular.js を活用すべきじゃないかな～と思います。（※個人の感想です）

とここまで書いておいて、結局はPEAR/AUTHではなく、cartalyst/sentry を使うことにしたので、今回の記事の内容は使わなかったんですけどね。

 

※この方法の他に、NgNonBindableを使用する方法もあります。

コメント

タイトルとURLをコピーしました