AngularJS - Есть ли способ для $ http.post отправлять параметры запроса вместо JSON?

У меня есть старый код, который делает запрос AJAX POST через метод jQuery post и выглядит примерно так:

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

requestData это просто объект javascript с некоторыми основными строковыми свойствами.

Я сейчас перехожу на использование Angular и хочу заменить этот вызов на $ http.post. Я придумал следующее:

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

Когда я сделал это, я получил от сервера ответ об ошибке 500. Используя Firebug, я обнаружил, что это отправляет тело запроса следующим образом:

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

Успешный jQuery $.postотправляет тело следующим образом:

param1=value1&param2=value2&param3=value3

Конечная точка, на которую я обращаюсь, ожидает параметры запроса, а не JSON. Итак, мой вопрос: есть ли способ $http.postотправить объект javascript в качестве параметров запроса вместо JSON? Да, я знаю, что могу построить строку самостоятельно из объекта, но я хочу знать, предоставляет ли Angular что-нибудь для этого из коробки.

Я думаю , что paramsпараметр конфигурации не будет работать здесь , так как он добавляет строку в URL вместо тела , но добавить к тому , что Infeligo предложил здесь является примером глобального переопределения по умолчанию преобразования ( с помощью JQuery параметров в качестве примера для преобразования данные в строку параметров).

Настройте глобальную функцию transformRequest:

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

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

Таким образом, все вызовы $ http.post автоматически преобразуют тело в тот же формат параметров, который используется при $.postвызове jQuery .

Обратите внимание, что вы также можете установить заголовок Content-Type для каждого вызова или глобально следующим образом:

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

Пример неглобального запроса на преобразование для каждого вызова:

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

Если вы используете Angular> = 1.4 , вот самое чистое решение, которое я нашел, которое не полагается ни на что настраиваемое или внешнее:

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

И тогда вы можете сделать это в любом месте вашего приложения:

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

И он будет правильно сериализовать данные как param1=value1&param2=value2и отправить их /requesturlс application/x-www-form-urlencoded; charset=utf-8заголовком Content-Type, как обычно ожидается с запросами POST на конечных точках.

Из документации AngularJS:

params - {Object.} - Карта строк или объектов, которые будут преобразованы в? key1 = value1 & key2 = value2 после url. Если значение не является строкой , оно будет JSONified.

Итак, укажите строку в качестве параметров. Если вы этого не хотите, используйте преобразования. Опять же из документации:

Чтобы переопределить это преобразование локально, укажите функции преобразования как свойства transformRequest и / или transformResponse объекта конфигурации. Чтобы глобально переопределить преобразования по умолчанию, переопределите свойства $ httpProvider.defaults.transformRequest и $ httpProvider.defaults.transformResponse $ httpProvider.

Обратитесь к документации для получения более подробной информации.

Используйте $.paramфункцию jQuery для сериализации данных JSON в requestData.

Короче говоря, используя код, похожий на ваш:

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

Чтобы использовать это, вы должны включить jQuery на свою страницу вместе с AngularJS.

Обратите внимание, что начиная с Angular 1.4 вы можете сериализовать данные формы без использования jQuery.

В app.js:

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

Затем в вашем контроллере:

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

Это может быть чем-то вроде взлома, но я избежал этой проблемы и преобразовал json в массив PHP POST на стороне сервера:

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

У меня также есть проблемы с настройкой пользовательской HTTP-аутентификации, потому что $ resource кеширует запрос.

Чтобы заставить его работать, вам нужно перезаписать существующие заголовки, выполнив это

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

Надеюсь, я смог кому-то помочь. Мне потребовалось 3 дня, чтобы понять это.

Измените заголовки по умолчанию:

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

Затем используйте $.paramметод 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 () {});
    }
  ]);

Быстрая настройка - для тех из вас, у кого проблемы с глобальной конфигурацией функции transformRequest, вот фрагмент, который я использую, чтобы избавиться от Cannot read property 'jquery' of undefinedошибки:

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

Вы также можете решить эту проблему без изменения кода на сервере, изменения заголовка при $http.postвызове и использования $_POSTобычного способа. Объясняется здесь: http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

Я много раз обнаруживал проблемное поведение этого целого. Я использовал его из express (без типизации) и bodyParser (с типами dt ~ body-parser).

Я не пытался загрузить файл, а просто интерпретировал JSON, указанный в строке сообщения.

Это request.bodyбыл просто пустой json ( {}).

После долгих исследований это сработало для меня:

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

Также может быть важно application/jsonуказать тип содержимого в строке запроса со стороны клиента.

Синтаксис для AngularJS v1.4.8 + (v1.5.0)

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

Например:

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