¿Cómo puedo publicar datos como datos de formulario en lugar de una carga útil de solicitud?

Si no desea utilizar jQuery en la solución, puede probar esto. Solución atrapó desde aquí 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 confusión en torno a este tema me inspiró a escribir una entrada de blog al respecto. La solución que propongo en este post es mejor que su actual solución top rated porque no le restringe a parametrizar su objeto de datos para llamadas de servicio http http; es decir, con mi solución puede simplemente continuar pasando objetos de datos reales a http http.post (), etc. y aún así lograr el resultado deseado.

Además, la respuesta mejor valorada se basa en la inclusión de jQuery completo en la página para el $.función param (), mientras que mi solución es agnóstica jQuery, AngularJS puro listo.

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

Espero que esto ayude.

Tomé algunas de las otras respuestas e hice algo un poco más limpio, puse esta llamada .config() al final de su angular.módulo en tu 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 partir de AngularJS v1.4.0, hay un servicio incorporado $httpParamSerializer que convierte cualquier objeto a una parte de una solicitud HTTP de acuerdo con las reglas que se enumeran en la página docs.

Se puede usar así:

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

Recuerde que para un mensaje de formulario correcto, el encabezado Content-Type debe cambiarse. Para hacer esto globalmente para todas las solicitudes POST, se puede usar este código (tomado de la media respuesta de Albireo):

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

Para hacer esto solo para el post actual, la propiedad headers de la request-object necesita ser modificado:

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

$http(req);

Puede definir el comportamiento globalmente:

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

Así que no tienes que redefinirlo cada vez:

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

Como solución alternativa, simplemente puede hacer que el código que recibe el MENSAJE responda a los datos de la aplicación/json. Para PHP he añadido el código a continuación, lo que me permite publicar en él, ya sea en forma codificada 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

Estas respuestas parecen una locura exagerada, a veces, simple es simplemente mejor:

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

Puede probar con la siguiente solución

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

Crear un servicio adaptador para post:

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

}) 

Úsalo en tus controladores o lo que sea:

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

})

Hay un tutorial muy bonito que repasa esto y otras cosas relacionadas - Enviando formularios AJAX: La forma AngularJS.

Básicamente, debe configurar el encabezado de la solicitud POST para indicar que está enviando datos de formulario como una cadena codificada de URL, y establecer los datos que se enviarán en el mismo 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)
});

Tenga en cuenta que la función auxiliar param() de jQuery se usa aquí para serializar los datos en una cadena, pero también puede hacerlo manualmente si no usa jQuery.

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

Por favor checkout! https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Para los usuarios de Symfony2:

Si no desea cambiar nada en su javascript para que esto funcione, puede hacer estas modificaciones en su aplicación symfony:

Cree una clase que extienda la clase 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;

}

}

Ahora usa tu clase en app_dev.php (o cualquier archivo de índice que utilice)

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

Simplemente establecer el tipo de contenido no es suficiente, la url codifica los datos del formulario antes de enviarlos. $http.post(url, jQuery.param(data))

Actualmente estoy usando la siguiente solución que encontré en el grupo de 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;
});

Tenga en cuenta que si está utilizando PHP, necesitará usar algo como el componente HTTP de Symfony 2 Request::createFromGlobals() para leer esto, ya que $_POST no se cargará automáticamente con él.

AngularJS lo está haciendo bien al hacer el siguiente content-type dentro del encabezado http-request:

Content-Type: application/json

Si va con php como yo, o incluso con Symfony2, simplemente puede extender la compatibilidad de su servidor para el estándar json como se describe aquí: http://silex.sensiolabs.org/doc/cookbook/json_request_body.html

La forma Symfony2 (por ejemplo, dentro de su 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());

La ventaja sería que no necesita usar jQuery param y usted podría utilizar AngularJS su forma nativa de hacer este tipo de solicitudes.

Respuesta completa (desde angular 1.4). Necesita incluir de dependency {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) { 

            });

En la configuración de la aplicación -

$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 su solicitud de recursos -

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

Esta no es una respuesta directa, sino una dirección de diseño ligeramente diferente:

No publique los datos como un formulario, sino como un objeto JSON que se asignará directamente al objeto del lado del servidor, o use la variable de ruta de estilo REST

Ahora sé que ninguna opción podría ser adecuada en su caso ya que está tratando de pasar una clave XSRF. Mapearlo en una variable de ruta como esta es un diseño terrible:

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

Porque por naturaleza querrías pasar la clave xsrf a otro camino también, /login, /book-appointment etc. y usted no quiere ensuciar su bonita URL

Curiosamente agregarlo como un campo de objeto tampoco es apropiado, porque ahora en cada objeto json que pasa al servidor tiene que agregar el campo

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

Ciertamente no desea agregar otro campo en su clase del lado del servidor que no tenga una asociación semántica directa con el objeto de dominio.

En mi opinión, la mejor manera de pasar su clave xsrf es a través de un encabezado HTTP. Muchas protecciones xsrf la biblioteca del marco web del lado del servidor admite esto. Por ejemplo, en Java Spring, puede pasarlo usando X-CSRF-TOKEN header.

La excelente capacidad de Angular de unir objetos JS a objetos UI significa que podemos deshacernos de la práctica de publicar formularios todos juntos, y publicar JSON en su lugar. JSON se puede des-serializar fácilmente en objetos del lado del servidor y soportar estructuras de datos complejas como mapas, matrices, objetos anidados, etc.

¿Cómo publicar matriz en un formulario de carga útil? Tal vez como esto:

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

O esto:

shopLocation=downtwon&daysOpen=Monday,Tuesday,Wednesday

Ambos son de diseño pobre..

Esto es lo que estoy haciendo para mi necesidad, donde necesito enviar los datos de inicio de sesión a la API como datos de formulario y el objeto Javascript(userData) se convierte automáticamente a datos codificados en 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);
        });

Así es mi Userdata

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

El único thin que tiene que cambiar es usar la propiedad " params "en lugar de" data " cuando cree su objeto http http:

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

En el ejemplo anterior clients[i] es solo un objeto JSON (no serializado de ninguna manera). Si usa "params" en lugar de "data" angular serializará el objeto por usted usando htt httpParamSerializer: https://docs.angularjs.org/api/ng/service / htt httpParamSerializer

Use el servicio AngularJS $http y use su método post o configure la función $http.