AngularJSの$httpサービスのPOSTでデータ送信

①HTTPヘッダーのContent-Type
　
デフォルトでは、”application/json”が指定されます。
　
②送信データ
　
送信データを下記のようにオブジェクトを使って指定した場合は、JSONフォーマットに変換されて送信されます。
　
$scope.send_data ={
　id: “0101”,
　name: “鈴木”
};

送信データをデフォルトのJSON形式ではなく、”id=0101&name=鈴木”のようにx-www-form-urlencoded形式で送信する場合を例に示します。
　
①HTTPヘッダーを設定
　
configオブジェクトのheaders属性に下記のように指定します。
　
var config = {
　headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ },
　　：
　
②送信データを”id=0101&name=鈴木”の形式に変換
　
configオブジェクトのtransformRequest属性に送信データを変換する関数を定義します。

var config = {
　　：
  transformRequest: function(data) {
    var transStr;
    if (data) {
      for (var key in data) {
        if (transStr) {
          transStr += '&' + key + '=' + data[key];
        } else {
          transStr = key + '=' + data[key];
        }
      }
    }
    return transStr;
  }
}

上記３．では、各HTTP送受信に対して個別に設定していましたが、アプリケーション全体で共通に適用するデフォルトの設定を行う事も出来ます。
　
$httpProviderのdefaults属性を使って設定し、モジュールのconfigメソッドを使って実行します。
　
１）$httpProvidorのdefaultsプロパティ
　
①headers
　
・HTTPヘッダーのキーと値のペアを指定するオブジェクト
・各HTTPのメソッドまたは共通としてヘッダーの設定を行う。
headers.common、headers.get、headers.put、headers.post
　
②transformRequest、transformResponse
　
・送信または受信データを変換する関数。
・変換する関数の配列として指定
　
③xsrfHeaderName、xsrfCookieName
　
・XSRFのキーと値を指定。
　
２）使用例
　
上記３．と同様にすべての送信データをx-www-form-urlencoded形式に変換して送信する場合を例に示します。

var demoApp = angular.module('demoApp', ['ui.bootstrap']);
demoApp.config(['$httpProvider', function($httpProvider) {
  $httpProvider.defaults.transformRequest.push(
    function(data) {
      var requestStr;
      if (data) {
        data = JSON.parse(data);
        for (var key in data) {
          if (requestStr) {
            requestStr += '&' + key + '=' + data[key];
          } else {
            requestStr = key + '=' + data[key];
          }
        }
      }
      return requestStr;
  });
  $httpProvider.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';
}]);
demoApp.controller('mainController', function ($scope, $http) {
　　：
  $http.post(url, data)
　　　：

・送信データを下記のようにオブジェクトで設定。
$scope.send_data ={
　id: “0101”,
　name: “鈴木”
};
　
①configオブジェクトを設定せずにデフォルトで送信した場合のHTTPヘッダーのContent-Typeと送信データを表示。
　
②configオブジェクトのヘッダーに’application/x-www-form-urlencoded’を設定し、送信データの変換関数を定義して送信した場合のヘッダーと送信データを表示。
　
デモとコードサンプルはこちら。