Wie kann ich Daten als Formulardaten anstelle einer Anforderungsnutzlast buchen?

Im folgenden Code $httpruft die AngularJS- Methode die URL auf und sendet das xsrf-Objekt als "Request Payload" (wie auf der Registerkarte "Chrome-Debugger-Netzwerk" beschrieben). Die jQuery- $.ajaxMethode führt denselben Aufruf aus, sendet jedoch xsrf als "Formulardaten".

Wie kann ich AngularJS veranlassen, xsrf als Formulardaten anstelle einer Anforderungsnutzlast zu senden?

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

Die folgende Zeile muss dem übergebenen $ http-Objekt hinzugefügt werden:

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

Die übergebenen Daten sollten in eine URL-codierte Zeichenfolge konvertiert werden:

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

Sie haben also so 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

AKTUALISIEREN

Informationen zum Verwenden neuer Dienste, die mit AngularJS V1.4 hinzugefügt wurden, finden Sie unter

• URL-Codierungsvariablen, die nur AngularJS-Dienste verwenden

Wenn Sie jQuery nicht in der Lösung verwenden möchten, können Sie dies versuchen. Lösung von hier geschnappt 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 () {});

Die anhaltende Verwirrung um dieses Thema hat mich dazu inspiriert, einen Blog-Beitrag darüber zu schreiben. Die Lösung, die ich in diesem Beitrag vorschlage, ist besser als Ihre derzeit am besten bewertete Lösung, da Sie nicht darauf beschränkt sind, Ihr Datenobjekt für $ http-Dienstaufrufe zu parametrisieren. Mit meiner Lösung können Sie also einfach weiterhin tatsächliche Datenobjekte an $ http.post () usw. übergeben und trotzdem das gewünschte Ergebnis erzielen.

Die am besten bewertete Antwort basiert auch auf der Aufnahme von vollständigem jQuery in die Seite für die Funktion $ .param (), während meine Lösung jQuery-unabhängig und rein AngularJS-fähig ist.

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

Hoffe das hilft.

Ich nahm einige der anderen Antworten und machte etwas sauberer. .config()Setzen Sie diesen Aufruf an das Ende Ihres angle.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("&");
  });
}]);

Ab AngularJS v1.4.0 gibt es einen integrierten $httpParamSerializerDienst, der jedes Objekt gemäß den auf der Dokumentseite aufgeführten Regeln in einen Teil einer HTTP-Anforderung konvertiert .

Es kann folgendermaßen 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-TypeKopfzeile geändert werden muss. Um dies global für alle POST-Anfragen zu tun, kann dieser Code (aus Albireos halber Antwort entnommen) 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 headersEigenschaft des Anforderungsobjekts geändert werden:

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

$http(req);

Sie können das Verhalten global definieren:

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

Sie müssen es also 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
});

Um dieses Problem zu umgehen, können Sie den Code, der den POST empfängt, einfach auf Anwendungs- / JSON-Daten reagieren lassen. Für PHP habe ich den folgenden Code hinzugefügt, damit ich ihn entweder formularcodiert oder JSON POSTEN kann.

//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

Diese Antworten sehen aus wie verrückter Overkill, manchmal ist einfach einfach besser:

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

Sie können 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 */
        });

Erstellen Sie einen Adapterdienst für die 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)
        })
    }

})

Es gibt ein wirklich nettes Tutorial, das dieses und andere verwandte Themen behandelt - Einreichen von AJAX-Formularen: The AngularJS Way .

Grundsätzlich müssen Sie den Header der POST-Anforderung festlegen, um anzuzeigen, dass Sie Formulardaten als URL-codierte Zeichenfolge senden, und die zu sendenden Daten im selben Format festlegen

$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 Hilfsfunktion param () von jQuery hier zum Serialisieren der Daten in eine Zeichenfolge verwendet wird. Sie können dies jedoch auch manuell tun, wenn Sie jQuery nicht verwenden.

var fd = new FormData();
    fd.append('file', file);
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(){
    })
    .error(function(){
    });

Bitte checken sie aus! https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Für Symfony2-Benutzer:

Wenn Sie nichts in Ihrem Javascript ändern möchten, damit dies funktioniert, können Sie diese Änderungen in Ihrer Symfony-App vornehmen:

Erstellen Sie eine Klasse, die die Klasse Symfony \ Component \ HttpFoundation \ Request erweitert:

<?php

namespace Acme\Test\MyRequest;

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\ParameterBag;

class MyRequest extends Request{


/**
* Override and extend the createFromGlobals function.
* 
* 
*
* @return Request A new request
*
* @api
*/
public static function createFromGlobals()
{
  // Get what we would get from the parent
  $request = parent::createFromGlobals();

  // Add the handling for 'application/json' content type.
  if(0 === strpos($request->headers->get('CONTENT_TYPE'), 'application/json')){

    // The json is in the content
    $cont = $request->getContent();

    $json = json_decode($cont);

    // ParameterBag must be an Array.
    if(is_object($json)) {
      $json = (array) $json;
  }
  $request->request = new ParameterBag($json);

}

return $request;

}

}

Verwenden Sie jetzt Ihre Klasse in app_dev.php (oder einer beliebigen Indexdatei, die Sie verwenden).

// web/app_dev.php

$kernel = new AppKernel('dev', true);
// $kernel->loadClassCache();
$request = ForumBundleRequest::createFromGlobals();

// use your class instead
// $request = Request::createFromGlobals();
$response = $kernel->handle($request);
$response->send();
$kernel->terminate($request, $response);

Nur den Inhaltstyp festzulegen ist nicht genug, URL-Codierung von Formulardaten vor dem Senden. $http.post(url, jQuery.param(data))

Ich verwende derzeit die folgende Lösung , die ich gefunden in der AngularJS Gruppe googeln.

$ http
.post ('/ echo / json /', 'json =' + encodeURIComponent (angle.toJson (data)), {
    Überschriften: {
        'Inhaltstyp': 'application / x-www-form-urlencoded; Zeichensatz = UTF-8 '
    }}
}). Erfolg (Funktion (Daten) {
    $ scope.data = data;
});

Beachten Sie, dass Sie, wenn Sie PHP verwenden, etwas wie Symfony 2-HTTP-Komponenten verwenden müssen Request::createFromGlobals(), um dies zu lesen, da $ _POST nicht automatisch damit geladen wird.

AngularJS macht es richtig, da es den folgenden Inhaltstyp im http-Request-Header ausführt:

Content-Type: application/json

Wenn Sie mit PHP wie mir oder sogar mit Symfony2 arbeiten, können Sie einfach Ihre Serverkompatibilität für den json-Standard wie hier beschrieben erweitern: http://silex.sensiolabs.org/doc/cookbook/json_request_body.html

Der Symfony2-Weg (z. B. in Ihrem DefaultController):

$request = $this->getRequest();
if (0 === strpos($request->headers->get('Content-Type'), 'application/json')) {
    $data = json_decode($request->getContent(), true);
    $request->request->replace(is_array($data) ? $data : array());
}
var_dump($request->request->all());

Der Vorteil wäre, dass Sie den jQuery-Parameter nicht verwenden müssen und AngularJS als native Methode zur Ausführung solcher Anforderungen verwenden können.

Vollständige Antwort (seit Winkel 1.4). Sie müssen de dependency $ httpParamSerializer einschließen

var res = $resource(serverUrl + 'Token', { }, {
                save: { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
            });

            res.save({ }, $httpParamSerializer({ param1: 'sdsd', param2: 'sdsd' }), function (response) {

            }, function (error) { 

            });

In Ihrer App-Konfiguration -

$httpProvider.defaults.transformRequest = function (data) {
        if (data === undefined)
            return data;
        var clonedData = $.extend(true, {}, data);
        for (var property in clonedData)
            if (property.substr(0, 1) == '$')
                delete clonedData[property];

        return $.param(clonedData);
    };

Mit Ihrer Ressourcenanfrage -

 headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }

Dies ist keine direkte Antwort, sondern eine etwas andere Designrichtung:

Veröffentlichen Sie die Daten nicht als Formular, sondern als JSON-Objekt, das direkt dem serverseitigen Objekt zugeordnet werden soll, oder verwenden Sie die Pfadvariable im REST-Stil

Jetzt weiß ich, dass keine der beiden Optionen in Ihrem Fall geeignet ist, da Sie versuchen, einen XSRF-Schlüssel zu übergeben. Die Zuordnung zu einer Pfadvariablen wie dieser ist ein schreckliches Design:

http://www.someexample.com/xsrf/{xsrfKey}

Denn von Natur aus wollen Sie auch XSRF Schlüssel zum anderen Weg passieren, /login, /book-appointmentusw. , und Sie wollen nicht zu verwirren Ihre hübsche URL

Interessanterweise ist das Hinzufügen als Objektfeld ebenfalls nicht geeignet, da Sie jetzt für jedes JSON-Objekt, das Sie an den Server übergeben, das Feld hinzufügen müssen

{
  appointmentId : 23,
  name : 'Joe Citizen',
  xsrf : '...'
}

Sie möchten Ihrer serverseitigen Klasse sicherlich kein weiteres Feld hinzufügen, das keine direkte semantische Zuordnung zum Domänenobjekt hat.

Meiner Meinung nach ist der beste Weg, Ihren xsrf-Schlüssel zu übergeben, ein HTTP-Header. Viele serverseitige Webframework-Bibliotheken mit xsrf-Schutz unterstützen dies. In Java Spring können Sie es beispielsweise über den X-CSRF-TOKENHeader übergeben .

Die hervorragende Fähigkeit von Angular, JS-Objekte an UI-Objekte zu binden, bedeutet, dass wir die Praxis des gemeinsamen Postens von Formularen loswerden und stattdessen JSON veröffentlichen können. JSON kann leicht in serverseitige Objekte de-serialisiert werden und unterstützt komplexe Datenstrukturen wie Map, Arrays, verschachtelte Objekte usw.

Wie postet man ein Array in einer Formularnutzlast? Vielleicht so:

shopLocation=downtown&daysOpen=Monday&daysOpen=Tuesday&daysOpen=Wednesday

oder dieses:

shopLocation=downtwon&daysOpen=Monday,Tuesday,Wednesday

Beide sind schlechtes Design ..

Dies ist, was ich für meine Bedürfnisse tue, wo ich die Anmeldedaten als Formulardaten an die API senden muss und das Javascript-Objekt (userData) automatisch in URL-codierte Daten konvertiert wird

        var deferred = $q.defer();
        $http({
            method: 'POST',
            url: apiserver + '/authenticate',
            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: userData
        }).success(function (response) {
            //logics
            deferred.resolve(response);
        }).error(function (err, status) {
           deferred.reject(err);
        });

So sind meine Userdata

var userData = {
                grant_type: 'password',
                username: loginData.userName,
                password: loginData.password
            }

Das einzige Problem, das Sie ändern müssen, ist die Verwendung der Eigenschaft "params" anstelle von "data", wenn Sie Ihr $ http-Objekt erstellen:

$http({
   method: 'POST',
   url: serviceUrl + '/ClientUpdate',
   params: { LangUserId: userId, clientJSON: clients[i] },
})

Im obigen Beispiel ist clients [i] nur ein JSON-Objekt (in keiner Weise serialisiert). Wenn Sie "params" anstelle von "data" verwenden, serialisiert Angular das Objekt für Sie mithilfe von $ httpParamSerializer: https://docs.angularjs.org/api/ng/service/ $ httpParamSerializer

Verwenden Sie den AngularJS- $httpDienst und verwenden Sie dessen postMethode oder Konfigurationsfunktion $http.