AngularJSの$httpサービスでpostメソッドでサーバーへ送信する方法、HTTPヘッダーの設定方法と送信データの変換方法をまとめました。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
- 1.$httpサービスのPOSTメソッドの使用方法
- 2.AngularJSのデフォルト
- 3.HTTPヘッダーを設定、送信データを変換する方法
- 4.アプリケーション全体で$httpサービスのデフォルトを設定
- 5.サンプルコード
$httpサービスのPOSTメソッドの使用方法
$httpサービスの使用方法概要は下記参照。
AngularJSの$httpサービスの概要、サーバーからJSONデータ取得
$httpサービスのpostメソッドは下記のように引数を指定します。”data”に送信するデータを指定します。
$http.post(url, data, [config])
AngularJSの$httpサービスの概要、サーバーからJSONデータ取得
$httpサービスのpostメソッドは下記のように引数を指定します。”data”に送信するデータを指定します。
$http.post(url, data, [config])
AngularJSのデフォルト
①HTTPヘッダーのContent-Type
デフォルトでは、”application/json”が指定されます。
②送信データ
送信データを下記のようにオブジェクトを使って指定した場合は、JSONフォーマットに変換されて送信されます。
$scope.send_data ={
id: “0101”,
name: “鈴木”
};
デフォルトでは、”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属性に送信データを変換する関数を定義します。
①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形式に変換して送信する場合を例に示します。
$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’を設定し、送信データの変換関数を定義して送信した場合のヘッダーと送信データを表示。
デモとコードサンプルはこちら。
$scope.send_data ={
id: “0101”,
name: “鈴木”
};
①configオブジェクトを設定せずにデフォルトで送信した場合のHTTPヘッダーのContent-Typeと送信データを表示。
②configオブジェクトのヘッダーに’application/x-www-form-urlencoded’を設定し、送信データの変換関数を定義して送信した場合のヘッダーと送信データを表示。
デモとコードサンプルはこちら。
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchを使って内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchで内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ