AngularJS - Qualche modo per $ http.post di inviare i parametri della richiesta invece di JSON?

Ho un vecchio codice che sta effettuando una richiesta AJAX POST tramite il metodo post di jQuery e assomiglia a questo:

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

requestData è solo un oggetto javascript con alcune proprietà di stringa di base.

Sono in procinto di spostare le nostre cose per utilizzare Angular, e voglio sostituire questa chiamata con $ http.post. Mi è venuto in mente quanto segue:

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

Quando l'ho fatto, ho ricevuto una risposta di errore 500 dal server. Utilizzando Firebug, ho scoperto che questo inviava il corpo della richiesta in questo modo:

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

Il jQuery di successo $.postinvia il corpo in questo modo:

param1=value1&param2=value2&param3=value3

L'endpoint che sto raggiungendo si aspetta parametri di richiesta e non JSON. Quindi, la mia domanda è che c'è comunque da dire $http.postdi inviare l'oggetto javascript come parametri di richiesta invece di JSON? Sì, so che potrei costruire io stesso la stringa dall'oggetto, ma voglio sapere se Angular fornisce qualcosa per questo fuori dagli schemi.

Penso che il paramsparametro di configurazione non funzionerà qui poiché aggiunge la stringa all'URL invece del corpo, ma per aggiungere a ciò che Infeligo ha suggerito qui è un esempio di override globale di una trasformazione predefinita (utilizzando jQuery param come esempio per convertire i dati alla stringa del parametro).

Imposta la funzione TransformRequest globale:

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

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

In questo modo tutte le chiamate a $ http.post trasformeranno automaticamente il corpo nello stesso formato di parametro utilizzato dalla $.postchiamata jQuery .

Nota che potresti anche voler impostare l'intestazione Content-Type per chiamata o globalmente in questo modo:

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

TransformRequest non globale di esempio per chiamata:

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

Se usi Angular> = 1.4 , ecco la soluzione più pulita che ho trovato che non si basa su nulla di personalizzato o esterno:

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

E poi puoi farlo ovunque nella tua app:

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

Inoltre serializzerà correttamente i dati come param1=value1&param2=value2e li invierà /requesturlcon l' application/x-www-form-urlencoded; charset=utf-8intestazione Content-Type come normalmente previsto con le richieste POST sugli endpoint.

Dalla documentazione di AngularJS:

params - {Object.} - Mappa di stringhe o oggetti che verranno trasformati in? key1 = value1 & key2 = value2 dopo l'URL. Se il valore non è una stringa , sarà JSONified.

Quindi, fornire una stringa come parametri. Se non lo vuoi, usa le trasformazioni. Di nuovo, dalla documentazione:

Per eseguire l'override di queste trasformazioni localmente, specificare le funzioni di trasformazione come proprietà transformRequest e / o transformResponse dell'oggetto config. Per sovrascrivere globalmente le trasformazioni predefinite, sovrascrivi le proprietà $ httpProvider.defaults.transformRequest e $ httpProvider.defaults.transformResponse di $ httpProvider.

Fare riferimento alla documentazione per maggiori dettagli.

Usa la $.paramfunzione di jQuery per serializzare i dati JSON in requestData.

In breve, usando un codice simile al tuo:

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

Per usarlo, devi includere jQuery nella tua pagina insieme ad AngularJS.

Si noti che a partire da Angular 1.4, è possibile serializzare i dati del modulo senza utilizzare jQuery.

Nell'app.js:

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

Quindi nel tuo controller:

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

Questo potrebbe essere un trucco, ma ho evitato il problema e ho convertito il json nell'array POST di PHP sul lato server:

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

Ho anche problemi con l'impostazione dell'autenticazione http personalizzata perché $ resource memorizza la richiesta nella cache.

Per farlo funzionare devi sovrascrivere le intestazioni esistenti in questo modo

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

Spero di essere stato in grado di aiutare qualcuno. Mi ci sono voluti 3 giorni per capire questo.

Modifica le intestazioni predefinite:

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

Quindi usa il $.parammetodo di 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 () {});
    }
  ]);

Regolazione rapida: per quelli di voi che hanno problemi con la configurazione globale della funzione transformRequest, ecco lo snippet che sto usando per eliminare l' Cannot read property 'jquery' of undefinederrore:

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

Puoi anche risolvere questo problema senza cambiare il codice nel server, cambiare l'intestazione nella $http.postchiamata e usare $_POSTil modo normale. Spiegato qui: http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

Ho trovato molte volte un comportamento problematico di tutto questo. L'ho usato da express (senza digitazioni) e bodyParser (con le digitazioni dt ~ body-parser).

Non ho provato a caricare un file, ma semplicemente a interpretare un JSON fornito in una stringa di post.

Il request.bodyera semplicemente un json vuoto ( {}).

Dopo molte indagini finalmente questo ha funzionato per me:

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

Potrebbe anche essere importante fornire il application/jsontipo di contenuto nella stringa della richiesta dal lato client.

Sintassi per AngularJS v1.4.8 + (v1.5.0)

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

Per esempio:

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