Come posso pubblicare i dati come dati del modulo anziché come payload di richiesta?

Nel codice seguente, il $httpmetodo AngularJS chiama l'URL e invia l'oggetto xsrf come "Richiesta payload" (come descritto nella scheda Rete del debugger di Chrome). Il $.ajaxmetodo jQuery esegue la stessa chiamata, ma invia xsrf come "Dati modulo".

Come posso fare in modo che AngularJS invii xsrf come dati del modulo anziché come payload della richiesta?

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

La seguente riga deve essere aggiunta all'oggetto $ http che viene passato:

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

E i dati passati devono essere convertiti in una stringa codificata URL:

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

Quindi hai qualcosa del tipo:

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

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

AGGIORNARE

Per utilizzare i nuovi servizi aggiunti con AngularJS V1.4, vedere

• Variabili di codifica URL che utilizzano solo i servizi AngularJS

Se non si desidera utilizzare jQuery nella soluzione, è possibile provare questo. La soluzione è arrivata da qui 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 () {});

La continua confusione che circonda questo problema mi ha ispirato a scrivere un post sul blog al riguardo. La soluzione che propongo in questo post è migliore della tua attuale soluzione più votata perché non ti limita a parametrizzare il tuo oggetto dati per chiamate di servizio $ http; vale a dire con la mia soluzione puoi semplicemente continuare a passare oggetti dati reali a $ http.post (), ecc. e ottenere comunque il risultato desiderato.

Inoltre, la risposta più votata si basa sull'inclusione di jQuery completo nella pagina per la funzione $ .param (), mentre la mia soluzione è agnostica jQuery, pronta AngularJS pura.

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

Spero che sia di aiuto.

Ho preso alcune delle altre risposte e fatto qualcosa di un po 'più pulito, ho messo questa .config()chiamata alla fine del tuo angular.module nel tuo 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("&");
  });
}]);

A partire da AngularJS v1.4.0, esiste un servizio integrato $httpParamSerializerche converte qualsiasi oggetto in una parte di una richiesta HTTP in base alle regole elencate nella pagina dei documenti .

Può essere usato in questo modo:

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

Ricorda che per un post di modulo corretto, l' Content-Typeintestazione deve essere cambiata. Per fare ciò a livello globale per tutte le richieste POST, questo codice (preso dalla mezza risposta di Albireo) può essere usato:

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

Per fare ciò solo per il post corrente, la headersproprietà dell'oggetto richiesta deve essere modificata:

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

$http(req);

È possibile definire il comportamento a livello globale:

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

Quindi non devi ridefinirlo ogni volta:

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

Per ovviare al problema, puoi semplicemente fare in modo che il codice che riceve il POST risponda ai dati dell'applicazione / json. Per PHP ho aggiunto il codice seguente, permettendomi di postarlo in formato codificato o JSON.

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

Queste risposte sembrano eccessive, ma a volte semplice è semplicemente meglio:

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

Puoi provare con la soluzione seguente

$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 */
        });

Creare un servizio adattatore per posta:

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

}) 

Usalo nei tuoi controller o qualsiasi altra cosa:

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

})

C'è un tutorial davvero carino che analizza questa e altre cose correlate - Invio di moduli AJAX: The AngularJS Way .

Fondamentalmente, è necessario impostare l'intestazione della richiesta POST per indicare che si stanno inviando i dati del modulo come una stringa codificata URL e impostare i dati da inviare nello stesso formato

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

Si noti che la funzione helper param () di jQuery viene utilizzata qui per serializzare i dati in una stringa, ma è possibile farlo anche manualmente se non si utilizza jQuery.

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

Si prega di fare il checkout! https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Per gli utenti di Symfony2:

Se non vuoi cambiare nulla nel tuo javascript affinché funzioni, puoi fare queste modifiche nella tua app symfony:

Crea una classe che estende la classe Symfony \ Component \ HttpFoundation \ Request:

<?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;

}

}

Ora usa la tua classe in app_dev.php (o qualsiasi file indice che usi)

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

Basta impostare Content-Type non è sufficiente, url codifica i dati del modulo prima di inviarli. $http.post(url, jQuery.param(data))

Attualmente sto usando la seguente soluzione che ho trovato nel gruppo Google AngularJS.

$ http
.post ('/ echo / json /', 'json =' + encodeURIComponent (angular.toJson (data)), {
    intestazioni: {
        'Content-Type': 'application / x-www-form-urlencoded; charset = UTF-8'
    }
}). success (function (data) {
    $ scope.data = data;
});

Nota che se stai usando PHP, dovrai usare qualcosa come il componente HTTP di Symfony 2 Request::createFromGlobals()per leggere questo, poiché $ _POST non verrà caricato automaticamente con esso.

AngularJS lo sta facendo bene come sta facendo il seguente tipo di contenuto all'interno dell'intestazione della richiesta http:

Content-Type: application/json

Se vai con php come me o anche con Symfony2 puoi semplicemente estendere la compatibilità del tuo server per lo standard json come descritto qui: http://silex.sensiolabs.org/doc/cookbook/json_request_body.html

Il modo Symfony2 (ad es. All'interno di 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());

Il vantaggio sarebbe che non è necessario utilizzare jQuery param e si può usare AngularJS nel suo modo nativo di fare tali richieste.

Risposta completa (dall'angolo 1.4). Devi includere la dipendenza $ httpParamSerializer

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) { 

            });

Nella configurazione dell'app:

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

Con la tua richiesta di risorse -

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

Questa non è una risposta diretta, ma piuttosto una direzione del design leggermente diversa:

Non pubblicare i dati come modulo, ma come oggetto JSON da mappare direttamente sull'oggetto lato server o utilizzare la variabile percorso REST

Ora so che nessuna delle due opzioni potrebbe essere adatta nel tuo caso poiché stai cercando di passare una chiave XSRF. Mapparlo in una variabile di percorso come questa è un progetto terribile:

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

Perché per natura vorresti passare la chiave xsrf anche su un altro percorso /login, /book-appointmentecc. E non vuoi rovinare il tuo bel URL

È interessante notare che non è appropriato aggiungerlo come campo oggetto, perché ora su ciascuno degli oggetti json che passi al server devi aggiungere il campo

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

Certamente non vuoi aggiungere un altro campo alla tua classe lato server che non abbia un'associazione semantica diretta con l'oggetto dominio.

A mio avviso, il modo migliore per passare la chiave xsrf è tramite un'intestazione HTTP. Molte librerie web framework lato server di protezione xsrf lo supportano. Ad esempio in Java Spring, puoi passarlo usando l' X-CSRF-TOKENintestazione .

L'eccellente capacità di Angular di associare l'oggetto JS all'oggetto dell'interfaccia utente ci consente di sbarazzarci della pratica di pubblicare tutti i moduli insieme e di pubblicare invece JSON. JSON può essere facilmente serializzato in oggetti lato server e supportare strutture dati complesse come mappe, array, oggetti nidificati, ecc.

Come si inserisce un array in un payload del modulo? Forse così:

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

o questo:

shopLocation=downtwon&daysOpen=Monday,Tuesday,Wednesday

Entrambi sono design scadente ..

Questo è quello che sto facendo per le mie necessità, dove devo inviare i dati di accesso all'API come dati del modulo e l'oggetto Javascript (userData) viene convertito automaticamente in dati codificati URL

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

Ecco come sono i miei dati utente

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

L'unico thin che devi cambiare è usare la proprietà "params" anziché "data" quando crei il tuo oggetto $ http:

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

Nell'esempio sopra i client [i] è solo un oggetto JSON (non serializzato in alcun modo). Se usi "params" anziché "dati" angular, serializzerai l'oggetto per te usando $ httpParamSerializer: https://docs.angularjs.org/api/ng/service/ $ httpParamSerializer

Utilizzare il $httpservizio AngularJS e utilizzare il postmetodo o la $httpfunzione di configurazione .