Angular JS

Angular jsからデータをサーバへPOSTしPHPで受ける

  • このエントリーをはてなブックマークに追加
  • LINEで送る
AngularJSでWebシステム開発

AngularJSは、jQueryとサーバのやり取り方法が若干異なります。

jQueryでサーバとやり取り

jQueryであれば

$.ajax({
  type:"post",
  dataType:'json',
  url:'ファイルのパスURL.php'
}).done(function(data , textStatus , jqXHR){
  console.log("通信OK");
}).fail(function(jqxhr, status, error){
  console.log("失敗したよ");
});

という書き方で動いてました。
セイムオリジンポリシー(same origin policy)とかいう面倒な縛りのため、サーバ側は

<?php
header("Access-Control-Allow-Origin: *");
?>

という記述が先頭行に必要です。ただしこれはどのドメインからもアクセスを許可する意味なので、使いドコロは注意が必要かもしれません。

Angular JSでサーバとやり取り

対して、Angular JSでは次のようになります

.config(function( $httpProvider) {
  //サーバ接続に必要なお作法
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;application/json;charset=utf-8';
//略

まず、configの中で$httpprovider.defaults.headers.postという長いプロパティに値をセットします。これが無いと、通信に失敗して
XMLHttpRequest cannot load http://ファイルのパス Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

というエラーが表示されます。jQueryではこの記述が不要だったので、最初よくわかりませんでした。

Angular JSでデータをPOST

実際にサーバへデータを送るには次のようになります

$scope.myfunc = function(){
  var parameter = {};
  parameter.hoge = 'abc';
  parameter.moge = 'xyz';

  $http({
     method : 'POST',
     url:'http://localhost/ファイルのパス.php',
     data: parameter
  }).success(function(data, status, headers, config) {
     console.log("コネクションOK");
     console.log(data);
  }).error(function(data, status, headers, config) {
     console.log("コネクション失敗");
  });

}

サーバに渡す変数を2つ用意しました。一つは hogeで、値はabcですもう一つはmogeで、値はxyzです。

Angular JSからPOSTされたデータをPHPで処理

ここからはPHP側になります。$_POSTで受け取ることが出来ないので、少し工夫が必要です

<?php
header("Access-Control-Allow-Origin: *");
header('Content-type:application/json; charset=UTF-8');
$data = json_decode(file_get_contents('php://input'),true);
echo json_encode($data);
?>

Angular JSではページ遷移が無いので、PHPの返す値はGoogle chromeのデベロッパー画面から値が確認します
phpからJSON取得

PHPの$POSTが参照できない件

AngularJSでPOSTした値は、PHPの$POSTで参照することが出来ないようです。
なんでも勝手にJSON式に変換されて送られるらしいので、json_decodeで展開する必要があります。
jQueryに慣れきってしまっていると、AngularJSはときどき落とし穴があるので気をつけたいですね。

こちらの記事を参考にしました

  • このエントリーをはてなブックマークに追加
  • LINEで送る

AngularJS+BootStrapでサロンカルテを作りました

【作品例 サロンカルテ】
サロンカルテはAngular JSとBootStrap3を使って開発されたWebクラウドシステムの1つです。
強力なデータバインド機能のおかげで、お客様のカルテデータをサーバから取得、ng-repeatを使うだけで簡単に画面へ出力できたり、BootStrapで手軽におしゃれな画面が実装できます

サロンカルテのホームページ