XML POST

非同期通信を受け持つ XMLHttpRequest(XHR) でパラメーターを POST で渡します。
XHR でサーバーに処理を要求し、その処理結果をページに反映させます。
  名前:  maeda          送信
Hello, maeda !

次のリンクをクリックすると "ngp_xmlpost.html" が呼び出されます。
名前をタイプしてボタンをクリックすると、送られてきたメッセージが表示されます。
XML HttpRequest

プログラムの説明

  1. このプログラムは、非同期通信 XMLHttpRequest(XHR) のプログラムです。
    事前に PHP がサポートされているサーバーに post.php と ngp_xmlpost.html をアップロードして下さい。
    PHP をサポートしていないサーバーやローカル環境では実行できません。
  2. HttpRequest を受けて、メッセージを送信する "post.php" です。
    <?php
        $buf = json_decode(file_get_contents('php://input'), TRUE);
        $data = $buf['name'];
        if (!isset($data))  $data = "name Error";
        print "Hello, $data !";
    ?>
    
  3. AngularJS サンプルプログラム "ngp_xmlpost.html" です。
    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <meta charset="UTF-8" />
    <title>AngularJS TIPS</title>
    </head>
    
    <body ng-controller="MyController">
    <form name="myForm" novalidate>
      <label for="name">名前:</label>
      <input id="name" name="name" type="text" ng-model="name" />
      <button ng-click="onclick()">送信</button>
    </form>
    <div>{{result}}</div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    
    <script>
    angular.module('myApp', [])
      .controller('MyController', ['$scope', '$http', function($scope, $http) {
        $scope.onclick = function() {
          // 1サーバーに対してHTTP POSTでリクエストを送信
          $http({
            method: 'POST',
            url: 'post.php',
            data: { name: $scope.name }
          })
          // 成功時の処理(ページにあいさつメッセージを反映)
          .success(function(data, status, headers, config){
            $scope.result = data;
          })
          // 失敗時の処理(ページにエラーメッセージを反映)
          .error(function(data, status, headers, config){
            $scope.result = '通信失敗!';
          });
        };
      }]);
    </script>
    
    </body>
    </html>
    
  4. 実行結果は XML Http と同じですが、パラメーターを POST で渡します。
    パラメータとして渡す方法には GET で渡す方法と POST で渡す方法があります。
    GET で渡すとパラメータが丸見えになり文字列長にも制限があるのに対して、POST を使うと隠匿することが出来て制限も無くなります。
    今回も私のページを格納しているサーバーに PHP プログラム(post.php)をアップロードして呼び出します。
    POST で受け取るデータ形式は「application/x-www-form-urlencoded」です。
    そこで JSON 形式のデータを「application/x-www-form-urlencoded」に変換します。
    JSON 形式に変換されたら、後は GET の場合と同様です。
        $buf = json_decode(file_get_contents('php://input'), TRUE);
        $data = $buf['name'];
        if (!isset($data))  $data = "name Error";
        print "Hello, $data !";
    
  5. POST でパラメータを渡します。
    GET のときは params: { name: $scope.name } を使っていましたが、POST では data: { name: $scope.name } を使います。
          $http({
            method: 'POST',
            url: 'post.php',
            data: { name: $scope.name }
          })
    

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)