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

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

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

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

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

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

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

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

ここまでのまとめ

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

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

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

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

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください