PHP
CoffeeScript
AngularJS

angularJSの$httpで送ったデータを$_POSTで受け取る

More than 5 years have passed since last update.

angularの$httpを利用するとajaxリクエストが送信可能です。

$scope.$http(config)

configにはオブジェクトでそれぞれ送信情報を送ります。

  • method: HTTPメソド。'GET', 'POST' とか
  • params: GET形式のURLにひっつくパラメータ
  • data: POST形式のリクエストBODYにひっつくパラメータ
  • header: リクエストヘッダ
  • url: URL

POSTでパラメータを送る時の問題

 ただangularからPOSTでパラメータを送信しても、PHP側から$_POSTで取得できない。

    result = $http(
      method: "POST"
      url: url
      data: data
    )

 PHP側から取得するには

$request_body = file_get_contents('php://input');
$data = json_decode($request_body,true);

みたくします。ヘッダにapplication/x-www-form-urlencodedがついてないので$_POST側に自動で展開されないみたいです。

なんか最近はこういうpayloadの送り方が流行ってるみたいですが非常に面倒です。誰得なんでしょうか?

$_POSTで取りたい!!

 そんなわけのわからん方法で取れる、って言われても納得出来ねぇよ!!って人向けに。javascriptで送信する際に以下のようにちょっと操作を加えます。

    result = $http(
      method: "POST"
      url: "#{Config.api}user/put"
      data: $.param(data)
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    )

ポイントとしては2点

  • 自分でapplication/x-www-form-urlencodedヘッダを送信する。
  • データを$.param関数で変換する。

です。

つーか$httpってjQuery.ajaxとどう違うの?

 jQuery.ajaxと違って$httpはangularの内部だからコールバックで$scope.$applyしなくていいんだぜ!!みたいな記事を見た気もするけど、
jQuery.ajaxのコールバックも$scope.$apply要らんかったような…

 angularっぽい書き方と言う事で$httpを使ってますが正直あんまり利点は感じません。
あ、でも成功時と、エラー時のコールバック引数の形が同じなのは嬉しい。