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

Als Abhilfe können Sie einfach den Code, der die POST empfängt, auf application/json-Daten reagieren lassen. Für PHP habe ich den folgenden Code hinzugefügt, der es mir ermöglicht, POST entweder in formcodierter Form oder in JSON zu senden.

//handles JSON posted arguments and stuffs them into $_POST
//angular's $http makes JSON posts (not normal "form encoded")
$content_type_args = explode(';', $_SERVER['CONTENT_TYPE']); //parse content_type string
if ($content_type_args[0] == 'application/json')
  $_POST = json_decode(file_get_contents('php://input'),true);

//now continue to reference $_POST vars as usual

Answer 2

Diese Antworten sehen wie ein wahnsinniger Overkill aus, aber manchmal ist es einfach besser:

$http.post(loginUrl, "userName=" + encodeURIComponent(email) +
                     "&password=" + encodeURIComponent(password) +
                     "&grant_type=password"
).success(function (data) {
//...

Answer 3

Sie können es mit der folgenden Lösung versuchen

$http({
        method: 'POST',
        url: url-post,
        data: data-post-object-json,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        transformRequest: function(obj) {
            var str = [];
            for (var key in obj) {
                if (obj[key] instanceof Array) {
                    for(var idx in obj[key]){
                        var subObj = obj[key][idx];
                        for(var subKey in subObj){
                            str.push(encodeURIComponent(key) + "[" + idx + "][" + encodeURIComponent(subKey) + "]=" + encodeURIComponent(subObj[subKey]));
                        }
                    }
                }
                else {
                    str.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]));
                }
            }
            return str.join("&");
        }
    }).success(function(response) {
          /* Do something */
        });

Answer 4

Erstellen Sie einen Adapterdienst für Post:

services.service('Http', function ($http) {

    var self = this

    this.post = function (url, data) {
        return $http({
            method: 'POST',
            url: url,
            data: $.param(data),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
    }

}) 

Verwenden Sie es in Ihren Controllern oder was auch immer:

ctrls.controller('PersonCtrl', function (Http /* our service */) {
    var self = this
    self.user = {name: "Ozgur", eMail: null}

    self.register = function () {
        Http.post('/user/register', self.user).then(function (r) {
            //response
            console.log(r)
        })
    }

})

Answer 5

Es gibt ein wirklich schönes Tutorial, das dies und andere verwandte Themen behandelt - Übermittlung von AJAX-Formularen: Der AngularJS-Weg .

Grundsätzlich müssen Sie den Header der POST-Anforderung so einstellen, dass er angibt, dass Sie die Formulardaten als URL-kodierte Zeichenfolge senden, und die zu sendenden Daten im gleichen Format einstellen

$http({
  method  : 'POST',
  url     : 'url',
  data    : $.param(xsrf),  // pass in data as strings
  headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
});

Beachten Sie, dass die param()-Hilfsfunktion von jQuery hier für die Serialisierung der Daten in einen String verwendet wird, aber Sie können dies auch manuell tun, wenn Sie nicht jQuery verwenden.