AngularJS - Czy jest jakiś sposób, aby $ http.post wysyłać parametry żądania zamiast JSON?

Mam jakiś stary kod, który wykonuje żądanie AJAX POST za pośrednictwem metody postu jQuery i wygląda mniej więcej tak:

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

requestData jest po prostu obiektem javascript z kilkoma podstawowymi właściwościami ciągu.

Jestem w trakcie przenoszenia naszych rzeczy do użycia Angulara i chcę zastąpić to wywołanie $ http.post. Wymyśliłem co następuje:

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

Kiedy to zrobiłem, otrzymałem odpowiedź o błędzie 500 z serwera. Korzystając z Firebug, odkryłem, że wysłało to treść żądania w następujący sposób:

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

Pomyślne jQuery $.postwysyła treść w następujący sposób:

param1=value1&param2=value2&param3=value3

Punkt końcowy, do którego trafiam, oczekuje parametrów żądania, a nie formatu JSON. Tak więc moje pytanie brzmi: czy mimo to $http.postnależy wysłać obiekt javascript jako parametry żądania zamiast JSON? Tak, wiem, że mógłbym sam zbudować ciąg z obiektu, ale chcę wiedzieć, czy Angular zapewnia coś takiego po wyjęciu z pudełka.

Myślę, że paramsparametr config nie zadziała tutaj, ponieważ dodaje ciąg do adresu URL zamiast treści, ale aby dodać do tego, co sugeruje tutaj Infeligo, jest przykładem globalnego nadpisania domyślnej transformacji (używając parametru jQuery jako przykładu do konwersji dane do ciągu parametrów).

Skonfiguruj globalną funkcję transformRequest:

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

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

W ten sposób wszystkie wywołania $ http.post automatycznie przekształcą treść do tego samego formatu parametrów, który jest używany przez $.postwywołanie jQuery .

Zauważ, że możesz również chcieć ustawić nagłówek Content-Type dla połączenia lub globalnie w następujący sposób:

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

Przykładowe nieglobalne żądanie transformRequest na wywołanie:

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

Jeśli używasz Angular> = 1.4 , oto najczystsze rozwiązanie, które znalazłem, które nie opiera się na niczym niestandardowym ani zewnętrznym:

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

Następnie możesz to zrobić w dowolnym miejscu aplikacji:

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

I będzie prawidłowo szeregować dane jak param1=value1&param2=value2i wysłać go do /requesturlz application/x-www-form-urlencoded; charset=utf-8nagłówka Content-Type, jak to zwykle oczekuje wniosków post na punktach końcowych.

Z dokumentacji AngularJS:

params - {Object.} - Mapa ciągów lub obiektów, które zostaną zamienione na? key1 = value1 & key2 = value2 po adresie URL. Jeśli wartość nie jest ciągiem znaków , będzie to JSONified.

Więc podaj ciąg jako parametry. Jeśli tego nie chcesz, użyj transformacji. Ponownie z dokumentacji:

Aby nadpisać te transformacje lokalnie, określ funkcje transformacji jako właściwości transformRequest i / lub transformResponse obiektu config. Aby globalnie przesłonić domyślne przekształcenia, przesłoń właściwości $ httpProvider.defaults.transformRequest i $ httpProvider.defaults.transformResponse elementu $ httpProvider.

Więcej informacji można znaleźć w dokumentacji .

Użyj $.paramfunkcji jQuery, aby serializować dane JSON w requestData.

Krótko mówiąc, używając podobnego kodu jak Twój:

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

Aby z tego skorzystać, musisz dołączyć jQuery na swojej stronie wraz z AngularJS.

Zwróć uwagę, że od wersji Angular 1.4 możesz serializować dane formularza bez używania jQuery.

W pliku app.js:

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

Następnie w kontrolerze:

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

To może być trochę hack, ale uniknąłem problemu i przekonwertowałem json na tablicę POST PHP po stronie serwera:

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

Mam również problemy z ustawieniem niestandardowego uwierzytelniania HTTP, ponieważ $ zasób buforuje żądanie.

Aby to zadziałało, musisz w ten sposób nadpisać istniejące nagłówki

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

Mam nadzieję, że udało mi się komuś pomóc. Zrozumienie tego zajęło mi 3 dni.

Zmodyfikuj domyślne nagłówki:

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

Następnie użyj $.parammetody 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 () {});
    }
  ]);

Szybka regulacja - dla tych z Was, którzy mają problem z globalną konfiguracją funkcji transformRequest, oto fragment kodu, którego używam, aby pozbyć się Cannot read property 'jquery' of undefinedbłędu:

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

Możesz również rozwiązać ten problem bez zmiany kodu na serwerze, zmiany nagłówka w $http.postwywołaniu i używania $_POSTzwykłego sposobu. Wyjaśniono tutaj: http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

Wielokrotnie znajdowałem problematyczne zachowanie tej całości. Użyłem go z express (bez typów) i bodyParser (z typami dt ~ body-parser).

Nie próbowałem przesyłać pliku, zamiast tego po prostu zinterpretowałem JSON podany w ciągu postu.

request.bodyPo prostu pusty json ( {}).

Po wielu badaniach w końcu to zadziałało:

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

Ważne może być również podanie application/jsontypu zawartości w ciągu żądania po stronie klienta.

Składnia dla AngularJS w wersji 1.4.8 + (w wersji 1.5.0)

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

Na przykład:

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