エンジニア日記

日々の開発あれこれ

Angular JS で、APIを非同期でPOST呼び出しし、実行結果をアラート表示する

  • APIはPHPで作成
  • ユーザーのパスワードをリセットするAPI
  • リセットボタンを押下して呼び出される
  • APIは実行結果をJSONデータで返却する
  • JSONデータの戻り値を見て、成功、失敗を判断する
  • 失敗時にはエラーメッセージを表示する
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html lang="ja">

<body ng-app="user_edit" ng-controller="UserController" ng-cloak>
<button ng-click="reset()">リセットボタン</button>

<!-- Anguler JS 読み込み ここから -->
  <script src="angular.js"></script>
  <script src="angular-resource.js"></script>
<!-- Anguler JS 読み込み ここまで -->

<script>
    var UserController = function($scope, $resource){

    // リセットボタン
    $scope.reset = function(){

        var reset_password_api = $resource(" APIパス");
        var parameter = {user_id: 'hoge'};

        // POST送信
        reset_password_api.save(parameter, function(ret){

            if(ret['result'] == 'NG'){
                alert(ret['message']);
            } else {
                alert('成功');
            }
        });
    }
    var appModule = angular.module('user_edit', ['ngResource']);
    appModule.controller('UserController', UserController);
</script>
</body>
</html>

補足

PHPでAPIを作成した場合、POSTパラメータを受け取るには下記処理が必要

1
2
3
4
<?php
// ポストパラメータ受け取り
$post_data = json_decode(fgets(fopen('php://input','r')), true);
$user_id   = (!empty($post_data['user_id'])) ? $post_data['user_id'] : null;