AngularJSからPHPにポスト変数を渡す "本当に" 正しい方法

つい最近、とある事情で AngularJS を使い始めました。

jQueryと違って、ビューとモデルを全部JS側で扱えるのが便利ですね。

でも１つだけ良く分からなかったのが、
AngularJS からPHP側にポスト変数を渡すやり方

jQuery（Ajax）と同じだと勘違いしてたので、結構ハマりました。

そこで自分への忘備録も兼ね、AngularJSでPOST変数を渡す方法をまとめます。

このページの目次

PHPにポスト変数を渡す間違ったやり方
PHPにポスト変数を渡す正しい方法とは...
ここまでのまとめ

PHPにポスト変数を渡す間違ったやり方

まず自分が勘違いしてた間違ったやり方について

てっきりjQueryとほとんど同じ渡し方と思ってたんですが、違うみたいです。

例えば次みたいなJSコードを書いたとしましょう。

angular.module('myApp')
  .controller('HogeController',
  ['$scope', '$http', function($scope, $http){
    $http({
      method: 'POST',
      url: '/path/to/hoge.php',
      data: {
        name: 'Tanaka Taro',
        age: 24
      }
    })
    .then(
      function(resp){ console.log(resp); },
      function(error){ console.error(error); }
    );
  }]
);

angular.module('myApp')

.controller('HogeController',

['$scope', '$http', function($scope, $http){

$http({

method: 'POST',

url: '/path/to/hoge.php',

data: {

name: 'Tanaka Taro',

age: 24

}

})

.then(

function(resp){ console.log(resp); },

function(error){ console.error(error); }

);

}]

);

Ajaxと同じく、メソッドとかURL、POSTデータを渡すのは同じ

あとコールバック関数は then というメソッドから成功時と失敗時の２つが登録できます。

一見正しそうですが、実はこのコードは期待通りに動いてくれません。

例えば、次が上コードから呼び出される hoge.php というスクリプト

$name = @$_POST['name'];
$age = @$_POST['age'];

print_r('name = ' . $name . ' , $age = ' . $age);

$name = @$_POST['name'];

$age = @$_POST['age'];

print_r('name = ' . $name . ' , $age = ' . $age);

このコードを先ほどの AngularJS から呼び出してみると、こんな出力結果になっちゃいます。

name = , $age =

1	name = , $age =

ポスト変数が全く受け取れない！

これが僕自身が遭遇したトラブルの大まかな内容

「エラーもないし、なんでかな～」と色々調べてみたら、実はPHPへ渡すには少し工夫が必要みたいです、

PHPにポスト変数を渡す正しい方法とは...

AngularJS から PHP にポスト変数を渡すとき・・・

重要になってくるポイントは次の２点

jQueryの関数 $.param を使ってデータをシリアライズ化
application/x-www-form-urlencoded ヘッダーを送信する

この２点を忘れてしまうと、どうやらポスト変数が渡せない模様

この２点を守り、先ほどのコードを書き直したのが次のスクリプトです。

$http({
  method: 'POST',
  url: '/path/to/rhoge.php',
  headers: { 
    'Content-Type': 'application/x-www-form-urlencoded' 
  },
  data: $.param({
    name: 'Tanaka Taro',
    age: 24
  })
})
.then(
  function(resp){ console.log(resp); },
  function(error){ console.error(error); }
);

$http({

method: 'POST',

url: '/path/to/rhoge.php',

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

data: $.param({

name: 'Tanaka Taro',

age: 24

})

.then(

function(resp){ console.log(resp); },

function(error){ console.error(error); }

);

ハイライトした部分に注目

まず headers パラメーターに application/x-www-form-urlencoded を指定

これでキーと値が = で結ばれ、 & で結合される形式になります。

この例なら name=Tanaka Taro&age=24 みたいな感じで・・・

そして dataパラメーターに渡してたオブジェクトを $.param で囲んでるのもポイント

$,param は配列やオブジェクトをシリアライズ化（バイト列化）するためのものです。

上のように書き直せば、ポスト変数が正常に受け取れるようになるはず

name = Tanaka Taro , $age = 24

1	name = Tanaka Taro , $age = 24

ポスト変数を渡されたPHP側で出力してみたいら、しっかり受け取りできてました。

まさか AngularJS にこういう罠があったとは・・・

jQuery（Ajax）と同じ感覚でやるとドツボにハマるので、今度から注意したいです。

ここまでのまとめ

AngularJSのポスト変数の渡し方まとめ

ヘッダーを必ず送信すること
必ず headers パラメーターに application/x-www-form-urlencoded を設定する必要あり。こうすることで値とキーが = で結ばれ、& で結合された形式に変換できる
ポストデータを $.param で囲む
そのまま生の配列やオブジェクトを渡さないよう、シリアライズ化できる $.param で囲むべし。シリアライズ化できる関数があるなら、これ以外でもOK

僕自身、AngularJSはまだまだ初心者なので、色々コードを書いて慣れていきたいです。

以上、AngularJSからPHPにポスト変数を渡す方法でした。ではでは($・・)/~~~