Как отправить данные в виде данных формы вместо полезной нагрузки запроса?

Ответ 1

Следующая строка должна быть добавлена ​​к передаваемому объекту $http:

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

И переданные данные должны быть преобразованы в строку с кодировкой URL:

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

Итак, у вас есть что-то вроде:

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

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

Ответ 2

Если вы не хотите использовать jQuery в решении, вы можете попробовать это. Решение отсюда взято fooobar.com/questions/14302/...

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

Ответ 3

Продолжающаяся путаница вокруг этой проблемы вдохновила меня написать сообщение в блоге об этом. Решение, которое я предлагаю в этом сообщении, лучше, чем ваше текущее решение с наивысшим рейтингом, поскольку оно не ограничивает вас параметризацией вашего объекта данных за вызовы службы $http; то есть с моим решением вы можете просто продолжать передавать фактические объекты данных в $http.post() и т.д. и все еще добиваться желаемого результата.

Кроме того, самый высокий рейтинг ответов основан на включении полного jQuery в страницу для функции $.param(), тогда как мое решение является агностиком jQuery, чистым AngularJS ready.

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

Надеюсь, что это поможет.

Ответ 4

Я взял несколько других ответов и сделал что-то немного более чистым, поместив этот .config() вызов в конец вашего angular.module в 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("&");
  });
}]);

Ответ 5

В соответствии с AngularJS v1.4.0 существует встроенная служба $httpParamSerializer, которая преобразует любой объект в часть HTTP-запроса в соответствии с правилами, указанными в страница документов.

Его можно использовать следующим образом:

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

Помните, что для правильной записи формы заголовок Content-Type должен быть изменен. Чтобы сделать это глобально для всех запросов POST, этот код (взятый из полурезонанса Albireo) можно использовать:

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

Чтобы сделать это только для текущего сообщения, необходимо изменить свойство headers объекта request:

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

$http(req);

Ответ 6

Вы можете определить поведение по всему миру:

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

Так что вам не нужно переопределять его каждый раз:

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

Ответ 7

В качестве обходного пути вы можете просто заставить код, получающий POST, отвечать на данные приложения /json. Для PHP я добавил код ниже, разрешив мне POST к нему либо в форме, либо в JSON.

//handles JSON posted arguments and stuffs them into $_POST
//angular $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

Ответ 8

Эти ответы выглядят как безумный излишний, иногда простой просто:

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

Ответ 9

Вы можете попробовать с помощью решения ниже

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

Ответ 10

Есть действительно хороший учебник, который рассказывает об этом и других связанных вещах - Отправка форм AJAX: путь AngularJS.

В принципе, вам нужно установить заголовок запроса POST, чтобы указать, что вы отправляете данные формы в виде строки с кодировкой URL-адреса и устанавливаете, что данные должны быть отправлены в том же формате

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

Обратите внимание, что здесь используется вспомогательная функция jQuery param() для сериализации данных в строку, но вы также можете сделать это вручную, если не используете jQuery.

Ответ 11

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

Пожалуйста, проверьте! https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Ответ 12

Создайте службу адаптера для сообщения:

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

}) 

Используйте его в своих контроллерах или что-то еще:

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

})

Ответ 13

Для пользователей Symfony2:

Если вы не хотите что-то менять в своем javascript для этого, вы можете сделать эти изменения в своем приложении symfony:

Создайте класс, расширяющий класс 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;

}

}

Теперь используйте класс в app_dev.php(или любой файл индекса, который вы используете)

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

Ответ 14

Просто установить Content-Type недостаточно, url кодирует данные формы перед отправкой. $http.post(url, jQuery.param(data))

Ответ 15

В настоящее время я использую следующее решение я найденное в группе google AngularJS.

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

Обратите внимание: если вы используете PHP, вам нужно будет использовать что-то вроде HTTP-компонента Symfony 2 Request::createFromGlobals(), чтобы прочитать это, так как $_POST не будет автоматически загружаться с ним.

Ответ 16

AngularJS делает это правильно, поскольку делает следующий контент-тип внутри заголовка http-запроса:

Content-Type: application/json

Если вы идете с php, как я, или даже с Symfony2, вы можете просто расширить свою совместимость с сервером для стандартного json, как описано здесь: http://silex.sensiolabs.org/doc/cookbook/json_request_body.html

Способ Symfony2 (например, внутри вашего 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());

Преимущество заключалось бы в том, что вам не нужно использовать параметр jQuery, и вы можете использовать AngularJS свой собственный способ выполнения таких запросов.

Ответ 17

Полный ответ (с angular 1.4). Вам нужно включить зависимость $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) { 

            });

Ответ 18

В вашем приложении config -

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

С запросом ресурса -

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

Ответ 19

Это не прямой ответ, а немного другое направление дизайна:

Не размещайте данные как форму, а как объект JSON для непосредственного сопоставления с серверным объектом или используйте переменную пути стиля REST

Теперь я знаю, что ни один вариант не может быть подходящим в вашем случае, так как вы пытаетесь передать ключ XSRF. Сопоставление его в переменной пути, как это, является ужасным дизайном:

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

Поскольку по своей природе вы хотели бы передать ключ xsrf другому пути, /login, /book-appointment и т.д., и вы не хотите испортить свой симпатичный URL

Интересно, что добавление его как поля объекта тоже не подходит, потому что теперь на каждом из json-объектов вы переходите на сервер, вы должны добавить поле

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

Вы, конечно же, не хотите добавлять другое поле в свой серверный класс, который не имеет прямой семантической связи с объектом домена.

На мой взгляд, лучший способ передать ваш xsrf-ключ - через HTTP-заголовок. Это поддерживает многостраничная веб-библиотека защиты xsrf. Например, в Java Spring вы можете передать его с помощью заголовка X-CSRF-TOKEN.

Angular отличная возможность привязки объекта JS к объекту пользовательского интерфейса означает, что мы можем избавиться от практики размещения формы вместе и вместо этого разместить JSON. JSON можно легко де-сериализовать на серверный объект и поддерживать сложные структуры данных, такие как карта, массивы, вложенные объекты и т.д.

Как вы отправляете массив в виде полезной нагрузки? Может быть, вот так:

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

или это:

shopLocation=downtwon&daysOpen=Monday,Tuesday,Wednesday

Оба плохой дизайн.

Ответ 20

Единственный тон, который вам нужно изменить, - использовать свойства "params", а не "data", когда вы создаете свой объект $http:

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

В приведенном выше примере клиенты [i] - это просто объект JSON (не сериализованный каким-либо образом). Если вы используете "params", а не "data" angular, сериализуете объект для вас, используя $httpParamSerializer: https://docs.angularjs.org/api/ng/service/ $httpParamSerializer

Ответ 21

Используйте службу AngularJS $http и используйте ее метод post или настройте функцию $http.