117

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 がすぐに使用できるものを提供しているかどうかを知りたいです。

4

13 に答える 13

140

本文の代わりに URL に文字列を追加するため、config パラメータはここでは機能しないと思いますparamsが、ここで Infeligo が提案したものに追加するのは、デフォルトの変換のグローバル オーバーライドの例です (例としてjQueryパラメータを使用して変換します)。パラメータ文字列へのデータ）。

グローバル 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呼び出しで使用されるものと同じ param 形式に自動的に変換されます。

次のように、呼び出しごとに、またはグローバルに 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
    });
于 2012-08-30T07:07:28.097 に答える
17

AngularJS のドキュメントから:

params – {Object.} – URL の後に ?key1=value1&key2=value2 に変換される文字列またはオブジェクトのマップ。値が stringでない場合は、JSON 化されます。

したがって、文字列をパラメーターとして指定します。それが望ましくない場合は、変換を使用してください。繰り返しますが、ドキュメントから：

これらの変換をローカルでオーバーライドするには、変換関数を構成オブジェクトの transformRequest および/または transformResponse プロパティとして指定します。デフォルトの変換をグローバルにオーバーライドするには、$httpProvider の $httpProvider.defaults.transformRequest および $httpProvider.defaults.transformResponse プロパティをオーバーライドします。

詳細については、ドキュメントを参照してください。

于 2012-08-30T06:36:58.370 に答える
5

これはちょっとしたハックかもしれませんが、問題を回避し、サーバー側で json を PHP の POST 配列に変換しました。

$_POST = json_decode(file_get_contents('php://input'), true);
于 2013-11-13T13:41:35.610 に答える
5

$resource がリクエストをキャッシュするため、カスタム http 認証の設定にも問題があります。

機能させるには、これを実行して既存のヘッダーを上書きする必要があります

var transformRequest = function(data, headersGetter){
  var headers = headersGetter();
  headers['Authorization'] = 'WSSE profile="UsernameToken"';
  headers['X-WSSE'] = 'UsernameToken ' + nonce
  headers['Content-Type'] = 'application/json';
};

return $resource(
  url,
    {
    },
    {
      query: {
        method: 'POST',
        url: apiURL + '/profile',
        transformRequest: transformRequest,
        params: {userId: '@userId'}
      },
    }
);

誰かを助けることができたことを願っています。これを理解するのに3日かかりました。

于 2013-05-02T04:25:18.393 に答える
4

デフォルトのヘッダーを変更します。

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";

次に、JQuery の$.paramメソッドを使用します。

var payload = $.param({key: value});
$http.post(targetURL, payload);
于 2014-11-30T19:58:07.610 に答える
3 
   .controller('pieChartController', ['$scope', '$http', '$httpParamSerializerJQLike', function($scope, $http, $httpParamSerializerJQLike) {
        var data = {
                TimeStamp : "2016-04-25 12:50:00"
        };
        $http({
            method: 'POST',
            url: 'serverutilizationreport',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            data: $httpParamSerializerJQLike(data),
        }).success(function () {});
    }
  ]);
于 2016-05-04T10:01:48.670 に答える
2

Cannot read property 'jquery' of undefined簡単な調整 - transformRequest 関数のグローバル構成に問題がある方のために、エラーを取り除くために使用しているスニペットを次に示します。

$httpProvider.defaults.transformRequest = function(data) {
        return data != undefined ? $.param(data) : null;
    }
于 2013-01-21T00:43:19.367 に答える
1

サーバーのコードを変更したり、$http.post呼び出しでヘッダーを変更したり$_POST、通常の方法を使用したりせずに、この問題を解決することもできます。ここで説明: http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

于 2015-02-12T01:17:19.420 に答える
0

AngularJS v1.4.8 + (v1.5.0) の構文

       $http.post(url, data, config)
            .then(
                    function (response) {
                        // success callback
                    },
                    function (response) {
                        // failure callback
                    }
            );

例えば：

    var url = "http://example.com";

    var data = {
        "param1": "value1",
        "param2": "value2",
        "param3": "value3"
    };

    var config = {
        headers: {
            'Content-Type': "application/json"
        }
    };

    $http.post(url, data, config)
            .then(
                    function (response) {
                        // success callback
                    },
                    function (response) {
                        // failure callback
                    }
            );
于 2018-06-28T18:54:31.667 に答える