2015.6.12
2020.1.12

AngularJSのGET/POSTデータ送信

AngularJSでサーバ側にデータを送信するときの処理です。

バージョン)
 AngularJS 1.3

GETで送信

サーバ側はPHP


myApp = angular.module('myApp', []);

myApp.controller('testCtrl', function($scope, $http) {
	var param = {};
	param["id"] = "123";
	param["name"] = "テスト";

	$http({
		method: 'GET',
		url: 'test.php',
		params: param,
	}).success(function (data, status, headers, config) {
		// 送信OK
	}).error(function (data, status, headers, config) {
		// 送信NG
	});
});

POSTで送信

サーバ側はPHP


myApp = angular.module('myApp', []);

myApp.controller('testCtrl', function($scope, $http) {
	var param = {};
	param["id"] = "123";
	param["name"] = "テスト";

	$http({
		method: 'POST',
		url: 'test.php',
		headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
		data: $.param(param)
	}).success(function (data, status, headers, config) {
		// 送信OK
	}).error(function (data, status, headers, config) {
		// 送信NG
	});
});

初めてPOSTでデータを送信する場合、11,12行目で必ずつまづきます。

12行目の$.param()はjQueryのメソッドです。AngularJS 1.4では「$httpParamSerializerJQLike」を使用して対応できそう。(もうすぐリリースされるAngularJS 1.4の機能を先取りチェックしよう

詳しくは下記の参考リンクを参照。

[追記]
$httpParamSerializerJQLikeを試してみましたが、$.param()と違って、未設定(空文字)の項目はパラメータ自体が送信されませんでした。

参考リンク

AngularJS】関連記事