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

AngularJSの$httpサービスでpostメソッドでサーバーへ送信する方法、HTTPヘッダーの設定方法と送信データの変換方法をまとめました。

デモとコードサンプルはこちら
 
※目次をクリックすると目次の下部にコンテンツが表示されます。

$httpサービスのPOSTメソッドの使用方法
$httpサービスの使用方法概要は下記参照。
AngularJSの$httpサービスの概要、サーバーからJSONデータ取得
 
$httpサービスのpostメソッドは下記のように引数を指定します。”data”に送信するデータを指定します。
$http.post(url, data, [config])

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

HTTPヘッダーを設定、送信データを変換する方法
送信データをデフォルトの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サービスのデフォルトを設定
上記3.では、各HTTP送受信に対して個別に設定していましたが、アプリケーション全体で共通に適用するデフォルトの設定を行う事も出来ます。
 
$httpProviderのdefaults属性を使って設定し、モジュールのconfigメソッドを使って実行します。
 
1)$httpProvidorのdefaultsプロパティ
 
①headers
 
・HTTPヘッダーのキーと値のペアを指定するオブジェクト
・各HTTPのメソッドまたは共通としてヘッダーの設定を行う。
headers.common、headers.get、headers.put、headers.post
 
②transformRequest、transformResponse
 
・送信または受信データを変換する関数。
・変換する関数の配列として指定
 
③xsrfHeaderName、xsrfCookieName
 
・XSRFのキーと値を指定。
 
2)使用例
 
上記3.と同様にすべての送信データを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’を設定し、送信データの変換関数を定義して送信した場合のヘッダーと送信データを表示。
 
デモとコードサンプルはこちら

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください