[解決済み] AngularJS - $http.postがJSONの代わりにリクエストパラメータを送信する方法はありますか?
質問
古いコードで、AJAX POST リクエストを jQueryのpostメソッド を通してAJAXのPOSTリクエストを行う古いコードがあり、次のようなものです。
$.post("/foo/bar", requestData,
function(responseData)
{
//do stuff with response
}
requestData
は、いくつかの基本的な文字列プロパティを持つ単なるjavascriptオブジェクトです。
私はAngularを使用するために私たちのものを移行している最中で、この呼び出しを$http.postに置き換えたいと考えています。私は次のように思いつきました。
$http.post("/foo/bar", requestData).success(
function(responseData) {
//do stuff with response
}
});
これを実行すると、サーバーから500エラーの応答が返ってきました。Firebugを使ってみると、これはリクエストボディをこのように送信していました。
{"param1":"value1","param2":"value2","param3":"value3"}
成功したjQueryの
$.post
はこのようにボディを送信します。
param1=value1¶m2=value2¶m3=value3
私がヒットしているエンドポイントは、JSONではなく、リクエストパラメータを期待しています。そこで質問ですが、どうすれば
$http.post
に、JSONの代わりにリクエストパラメータとしてjavascriptオブジェクトを送信するように指示する方法はありますか?はい、私はオブジェクトから文字列を自分で構築することができることを知っていますが、Angularがこのための何かを箱から提供するかどうかを知りたいのです。
どのように解決するのですか?
私は
params
の設定パラメータは、本文ではなくURLに文字列を追加するので、ここでは動作しないと思います。しかし、Infeligoが提案したことに加えて、デフォルトの変換をグローバルにオーバーライドする例を示します(jQueryを使って
パラメータ
を例にして、データをparamの文字列に変換しています)。
グローバルなtransformRequest関数を設定します。
var app = angular.module('myApp');
app.config(function ($httpProvider) {
$httpProvider.defaults.transformRequest = function(data){
if (data === undefined) {
return data;
}
return $.param(data);
}
});
こうすることで、$http.postのすべての呼び出しは自動的にボディをjQueryで使用されるのと同じパラメータ形式に変換します。
$.post
の呼び出しで使われるのと同じ形式のパラメータに自動的に変換されます。
Content-Typeヘッダを呼び出しごとに、あるいはこのようにグローバルに設定したい場合があることに注意してください。
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
呼び出しごとの非グローバルなtransformRequestのサンプルです。
var transform = function(data){
return $.param(data);
}
$http.post("/foo/bar", requestData, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
transformRequest: transform
}).success(function(responseData) {
//do stuff with response
});
関連
-
[解決済み] フェッチする JSONデータをPOSTする
-
[解決済み] Java - POSTメソッドでHTTPパラメータを簡単に送信する
-
[解決済み] AngularJs $http.post() でデータが送信されない
-
[解決済み] Web API メソッドに json の POST データをオブジェクトとして渡すにはどうすればよいですか?
-
[解決済み] Typescript流のMongoose...?
-
[解決済み] uint8配列をbase64エンコードされた文字列に変換する方法は?
-
[解決済み] マングース ユーザーの全リストを取得する
-
[解決済み] node.js シェルコマンドの実行
-
[解決済み] Javascriptのsort()はどのように動作するのですか?
-
[解決済み] AngularJsでng-repeatを使用してフィルタリング(キー、値)を行うには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJs $http.post() でデータが送信されない
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] Typescript流のMongoose...?
-
[解決済み] WebpackでjQueryを本物のWindowオブジェクトに公開する
-
[解決済み] マングース ユーザーの全リストを取得する
-
[解決済み] jQueryでDIVを別のDIVに複製する
-
[解決済み] リアクトのシャローコンパールはどのように機能するのか
-
[解決済み] Angularで、配列内のオブジェクトを検索したい。
-
[解決済み] jqueryで部分文字列を作成する方法