1. ホーム
  2. javascript

[解決済み] AngularJS - $http.postがJSONの代わりにリクエストパラメータを送信する方法はありますか?

2022-05-17 03:30:02

質問

古いコードで、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&param2=value2&param3=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
    });