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("コネクション失敗");
});
}
サーバに渡す変数を２つ用意しました。一つは 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の$POSTが参照できない件
AngularJSでPOSTした値は、PHPの$POSTで参照することが出来ないようです。
なんでも勝手にJSON式に変換されて送られるらしいので、json_decodeで展開する必要があります。
jQueryに慣れきってしまっていると、AngularJSはときどき落とし穴があるので気をつけたいですね。
