Angular JSで非同期通信
前提：AngularJSが環境で使える．phpの環境が整っている
前回のAngular js でストップウォッチを作ったメモでユーザ側からのアクション(ボタンクリック)をcsvに書き出すためにhttp通信を使った．
流れは
- ボタンの中で定義したng-onclickに対して、hogeというイベントリスナーを呼び出す
- 呼び出したイベントリスナーの中にphp呼び出すスクリプトを書く
- 呼び出されたphpスクリプトがJS側からのデータを受け取り，サーバサイドの処理をする．
という感じ
ログをとったり，同一ページで動的にページを更新して行ったりするときに使う
まずはhtmlから
test.html
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<script src="./Control.js"></script>
</head>
<body>
<div ng-controller="hoge">
<input type="button"ng-click="hogehoge(1)" value="1">
<input type="button"ng-click="hogehoge(2)" value="2">
<input type="button"ng-click="hogehoge(3)" value="3">
<input type="button"ng-click="hogehoge(4)" value="4">
</div>
</body>
</html>
http通信のコードは
Control.js
var test = angular.module("app",[]);
test.controller("hoge",function($scope,$http){
// イベントリスナー定義
$scope.hogehoge = function(val){
var data;
data = { value: val };
// ここから通信
$http({
method: "post",
url: "proc.php",
data: data
}).then(function DoneCallback(res){
console.log(res)
},function failCallback(res){
console.log(res)
});
};
})
とまあこんな感じ
最後にphp
proc.php
<?php
$val = json_decode(file_get_contents("php://input"),TRUE);
file_put_contents("./test.csv",$val["value"]);
?>
これでボタンが押されたと同時にcsvに書き出しができるようになりました．
jQueryと大きく異なった点はjQueryは$_POSTで取得ができたのにAngularJSはfile_get_contentsでしか取得ができない点でハマった．
あとcontrollerの呼び出し引数のところで$httpも忘れずに..