AngularJS - Gibt es eine Möglichkeit für $ http.post, Anforderungsparameter anstelle von JSON zu senden?

Ich habe einen alten Code, der eine AJAX-POST-Anfrage über die Post-Methode von jQuery stellt und ungefähr so aussieht:

$.post("/foo/bar", requestData,
    function(responseData)
    {
        //do stuff with response
    }

requestData ist nur ein Javascript-Objekt mit einigen grundlegenden Zeichenfolgeneigenschaften.

Ich bin gerade dabei, unsere Daten auf Angular umzustellen, und ich möchte diesen Aufruf durch $ http.post ersetzen. Ich habe mir Folgendes ausgedacht:

$http.post("/foo/bar", requestData).success(
    function(responseData) {
        //do stuff with response
    }
});

Als ich dies tat, erhielt ich eine 500-Fehler-Antwort vom Server. Bei Verwendung von Firebug stellte ich fest, dass dies den Anfragetext wie folgt gesendet hat:

{"param1":"value1","param2":"value2","param3":"value3"}

Die erfolgreiche jQuery $.postsendet den Text folgendermaßen:

param1=value1&param2=value2&param3=value3

Der Endpunkt, den ich treffe, erwartet Anforderungsparameter und nicht JSON. Meine Frage ist also, ob es überhaupt zu sagen gibt, dass $http.postdas Javascript-Objekt als Anforderungsparameter anstelle von JSON gesendet werden soll. Ja, ich weiß, dass ich die Zeichenfolge selbst aus dem Objekt erstellen kann, aber ich möchte wissen, ob Angular sofort etwas dafür bereitstellt.

Ich denke, der paramsKonfigurationsparameter funktioniert hier nicht, da er die Zeichenfolge anstelle des Textes zur URL hinzufügt. Zu dem, was Infeligo hier vorschlägt, gehört jedoch ein Beispiel für die globale Überschreibung einer Standardtransformation (wobei der Konvertierungsparameter jQuery als Beispiel verwendet wird die Daten zu param string).

Richten Sie die globale transformRequest-Funktion ein:

var app = angular.module('myApp');

app.config(function ($httpProvider) {
    $httpProvider.defaults.transformRequest = function(data){
        if (data === undefined) {
            return data;
        }
        return $.param(data);
    }
});

Auf diese Weise transformieren alle Aufrufe von $ http.post den Body automatisch in dasselbe Parameterformat, das vom jQuery- $.postAufruf verwendet wird.

Beachten Sie, dass Sie den Content-Type-Header möglicherweise auch pro Aufruf oder global wie folgt festlegen möchten:

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

Beispiel für eine nicht globale transformRequest pro Aufruf:

    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
    });

Wenn Sie Angular> = 1.4 verwenden , ist hier die sauberste Lösung, die ich gefunden habe und die sich nicht auf benutzerdefinierte oder externe Elemente stützt:

angular.module('yourModule')
  .config(function ($httpProvider, $httpParamSerializerJQLikeProvider){
    $httpProvider.defaults.transformRequest.unshift($httpParamSerializerJQLikeProvider.$get());
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
});

Und dann können Sie dies überall in Ihrer App tun:

$http({
  method: 'POST',
  url: '/requesturl',
  data: {
    param1: 'value1',
    param2: 'value2'
  }
});

Außerdem werden die Daten korrekt als serialisiert param1=value1&param2=value2und /requesturlmit dem application/x-www-form-urlencoded; charset=utf-8Content-Type-Header an gesendet, wie dies normalerweise bei POST-Anforderungen auf Endpunkten zu erwarten ist.

Aus der AngularJS-Dokumentation:

params - {Object.} - Zuordnung von Zeichenfolgen oder Objekten, die nach der URL in? key1 = value1 & key2 = value2 umgewandelt werden. Wenn der Wert keine Zeichenfolge ist , wird er JSONified.

Geben Sie also einen String als Parameter an. Wenn Sie das nicht wollen, verwenden Sie Transformationen. Nochmals aus der Dokumentation:

Um diese Transformation lokal zu überschreiben, geben Sie Transformationsfunktionen als transformRequest- und / oder transformResponse-Eigenschaften des Konfigurationsobjekts an. Um die Standardtransformationen global zu überschreiben, überschreiben Sie die Eigenschaften $ httpProvider.defaults.transformRequest und $ httpProvider.defaults.transformResponse des $ httpProvider.

Weitere Informationen finden Sie in der Dokumentation .

Verwenden Sie die $.paramFunktion von jQuery, um die JSON-Daten in requestData zu serialisieren.

Kurz gesagt, verwenden Sie einen ähnlichen Code wie Ihren:

$http.post("/foo/bar",
$.param(requestData),
{
    headers:
    {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
}
).success(
    function(responseData) {
        //do stuff with response
    }
});

Um dies zu verwenden, müssen Sie jQuery zusammen mit AngularJS in Ihre Seite aufnehmen.

Beachten Sie, dass Sie ab Angular 1.4 die Formulardaten ohne Verwendung von jQuery serialisieren können.

In der app.js:

module.run(function($http, $httpParamSerializerJQLike) {
  $http.defaults.transformRequest.unshift($httpParamSerializerJQLike);
});

Dann in Ihrem Controller:

$http({
    method: 'POST',
    url: myUrl',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: myData
});

Dies mag ein bisschen hacken, aber ich habe das Problem vermieden und den JSON auf der Serverseite in das POST-Array von PHP konvertiert:

$_POST = json_decode(file_get_contents('php://input'), true);

Ich habe auch Probleme beim Festlegen der benutzerdefinierten http-Authentifizierung, da $ resource die Anforderung zwischenspeichert.

Damit es funktioniert, müssen Sie die vorhandenen Header auf diese Weise überschreiben

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'}
      },
    }
);

Ich hoffe ich konnte jemandem helfen. Ich habe 3 Tage gebraucht, um das herauszufinden.

Ändern Sie die Standardheader:

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

Verwenden Sie dann die $.paramMethode von JQuery :

var payload = $.param({key: value});
$http.post(targetURL, payload);

   .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 () {});
    }
  ]);

Schnelle Anpassung - Für diejenigen unter Ihnen, die Probleme mit der globalen Konfiguration der transformRequest-Funktion haben, ist hier das Snippet, das ich verwende, um den Cannot read property 'jquery' of undefinedFehler zu beseitigen:

$httpProvider.defaults.transformRequest = function(data) {
        return data != undefined ? $.param(data) : null;
    }

Sie können dieses Problem auch lösen, ohne den Code im Server zu ändern, den Header im $http.postAufruf zu ändern und $_POSTden normalen Weg zu verwenden. Hier erklärt: http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

Ich fand oft problematisches Verhalten dieses Ganzen. Ich habe es von Express (ohne Typisierung) und BodyParser (mit den Typisierungen dt ~ body-parser) verwendet.

Ich habe nicht versucht, eine Datei hochzuladen, sondern einfach einen JSON zu interpretieren, der in einer Post-Zeichenfolge angegeben ist.

Das request.bodywar einfach ein leerer json ( {}).

Nach vielen Nachforschungen hat das bei mir endlich geklappt:

import { json } from 'body-parser';
...
app.use(json()); <-- should be defined before the first POST handler!

Es kann auch wichtig sein, den application/jsonInhaltstyp in der Anforderungszeichenfolge von der Clientseite anzugeben.

Syntax für AngularJS v1.4.8 + (v1.5.0)

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

Z.B:

    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
                    }
            );