Wie kann ich Daten als Formulardaten statt als Nutzdaten einer Anfrage posten?

Question

Im folgenden Code wird die AngularJS $http Methode ruft die URL auf und übergibt das xsrf-Objekt als "Request Payload" (wie auf der Netzwerk-Registerkarte des Chrome-Debuggers beschrieben). Die jQuery $.ajax Methode führt denselben Aufruf durch, übergibt aber xsrf als "Form Data".

Wie kann ich AngularJS xsrf als Formulardaten anstelle einer Anfrage Nutzlast zu übermitteln?

var url = 'http://somewhere.com/';
var xsrf = {fkey: 'xsrf key'};

$http({
    method: 'POST',
    url: url,
    data: xsrf
}).success(function () {});

$.ajax({
    type: 'POST',
    url: url,
    data: xsrf,
    dataType: 'json',
    success: function() {}
});

Answer 1

Die folgende Zeile muss in das übergebene $http-Objekt eingefügt werden:

headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}

Und die übergebenen Daten sollten in eine URL-kodierte Zeichenkette umgewandelt werden:

> $.param({fkey: "key"})
'fkey=key'

Sie haben also etwas wie:

$http({
    method: 'POST',
    url: url,
    data: $.param({fkey: "key"}),
    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
})

Von: https://groups.google.com/forum/#!msg/angular/5nAedJ1LyO0/4Vj_72EZcDsJ

UPDATE

Um neue Dienste zu nutzen, die mit AngularJS V1.4 hinzugefügt wurden, siehe

• URL-Kodierungsvariablen, die nur AngularJS-Dienste verwenden

Answer 2

Wenn Sie jQuery nicht in der Lösung verwenden möchten, können Sie dies versuchen. Lösung von hier geklaut https://stackoverflow.com/a/1714899/1784301

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
    data: xsrf
}).success(function () {});

Answer 3

Ich habe ein paar der anderen Antworten genommen und etwas Saubereres daraus gemacht, nämlich Folgendes .config() Aufruf am Ende Ihres angular.module in Ihrer app.js:

.config(['$httpProvider', function ($httpProvider) {
  // Intercept POST requests, convert to standard form encoding
  $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  $httpProvider.defaults.transformRequest.unshift(function (data, headersGetter) {
    var key, result = [];

    if (typeof data === "string")
      return data;

    for (key in data) {
      if (data.hasOwnProperty(key))
        result.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
    }
    return result.join("&");
  });
}]);

Answer 4

Seit AngularJS v1.4.0 gibt es eine integrierte $httpParamSerializer Dienst, der ein beliebiges Objekt in einen Teil einer HTTP-Anfrage umwandelt, und zwar nach den Regeln, die in der Doku-Seite .

Sie kann wie folgt verwendet werden:

$http.post('http://example.com', $httpParamSerializer(formDataObj)).
    success(function(data){/* response status 200-299 */}).
    error(function(data){/* response status 400-999 */});

Denken Sie daran, dass für einen korrekten Formularbeitrag die Content-Type Kopfzeile geändert werden muss. Um dies global für alle POST-Anfragen zu tun, kann dieser Code (aus der halben Antwort von Albireo) verwendet werden:

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

Um dies nur für den aktuellen Beitrag zu tun, muss die headers Eigenschaft des Anfrageobjekts geändert werden muss:

var req = {
 method: 'POST',
 url: 'http://example.com',
 headers: {
   'Content-Type': 'application/x-www-form-urlencoded'
 },
 data: $httpParamSerializer(formDataObj)
};

$http(req);

Answer 5

Sie können das Verhalten global definieren:

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

So müssen Sie es nicht jedes Mal neu definieren:

$http.post("/handle/post", {
    foo: "FOO",
    bar: "BAR"
}).success(function (data, status, headers, config) {
    // TODO
}).error(function (data, status, headers, config) {
    // TODO
});