つい最近、とある事情で AngularJS を使い始めました。
jQueryと違って、ビューとモデルを全部JS側で扱えるのが便利ですね。
でも１つだけ良く分からなかったのが、
AngularJS からPHP側にポスト変数を渡すやり方
jQuery（Ajax）と同じだと勘違いしてたので、結構ハマりました。
そこで自分への忘備録も兼ね、AngularJSでPOST変数を渡す方法をまとめます。
PHPにポスト変数を渡す間違ったやり方
まず自分が勘違いしてた 間違ったやり方 について
てっきりjQueryとほとんど同じ渡し方と思ってたんですが、違うみたいです。
例えば次みたいなJSコードを書いたとしましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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 というスクリプト
|
1 2 3 4 |
$name = @$_POST['name']; $age = @$_POST['age']; print_r('name = ' . $name . ' , $age = ' . $age); |
このコードを先ほどの AngularJS から呼び出してみると、こんな出力結果になっちゃいます。
|
1 |
name = , $age = |
ポスト変数が全く受け取れない！
これが僕自身が遭遇したトラブルの大まかな内容
「エラーもないし、なんでかな～」と色々調べてみたら、実はPHPへ渡すには少し工夫が必要みたいです、
PHPにポスト変数を渡す正しい方法とは...
AngularJS から PHP にポスト変数を渡すとき・・・
重要になってくるポイントは次の２点
- jQueryの関数 $.param を使ってデータをシリアライズ化
- application/x-www-form-urlencoded ヘッダーを送信する
この２点を忘れてしまうと、どうやらポスト変数が渡せない模様
この２点を守り、先ほどのコードを書き直したのが次のスクリプトです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$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 は配列やオブジェクトをシリアライズ化（バイト列化）するためのものです。
上のように書き直せば、ポスト変数が正常に受け取れるようになるはず
|
1 |
name = Tanaka Taro , $age = 24 |
ポスト変数を渡されたPHP側で出力してみたいら、しっかり受け取りできてました。
まさか AngularJS にこういう罠があったとは・・・
jQuery（Ajax）と同じ感覚でやるとドツボにハマるので、今度から注意したいです。
ここまでのまとめ
AngularJSのポスト変数の渡し方まとめ
- ヘッダーを必ず送信すること
必ず headers パラメーターに application/x-www-form-urlencoded を設定する必要あり。こうすることで値とキーが = で結ばれ、& で結合された形式に変換できる
- ポストデータを $.param で囲む
そのまま生の配列やオブジェクトを渡さないよう、シリアライズ化できる $.param で囲むべし。シリアライズ化できる関数があるなら、これ以外でもOK
僕自身、AngularJSはまだまだ初心者なので、色々コードを書いて慣れていきたいです。
以上、AngularJSからPHPにポスト変数を渡す方法でした。ではでは($・・)/~~~
