javascript - validacion - ¿Cómo PUESTO datos de formulario urlencoded con $ http?

validacion de formularios con javascript ejemplos

Question

Soy nuevo en AngularJS, y para empezar, pensé en desarrollar una nueva aplicación usando solo AngularJS.

Estoy tratando de hacer una llamada AJAX al lado del servidor, usando $http desde mi aplicación Angular.

Para enviar los parámetros, intenté lo siguiente:

$http({
    method: "post",
    url: URL,
    headers: {''Content-Type'': ''application/x-www-form-urlencoded''},
    data: $.param({username: $scope.userName, password: $scope.password})
}).success(function(result){
    console.log(result);
});

Esto está funcionando, pero también está usando jQuery en $.param . Para eliminar la dependencia de jQuery, probé:

data: {username: $scope.userName, password: $scope.password}

pero esto pareció fallar. Entonces probé params :

params: {username: $scope.userName, password: $scope.password}

pero esto también pareció fallar. Entonces probé JSON.stringify :

data: JSON.stringify({username: $scope.userName, password: $scope.password})

Encontré estas posibles respuestas a mi búsqueda, pero no tuve éxito. ¿Estoy haciendo algo mal? Estoy seguro de que AngularJS proporcionaría esta funcionalidad, pero ¿cómo?

Answer 1

Variables de codificación URL que utilizan solo servicios AngularJS

Con AngularJS 1.4 y superior, dos servicios pueden manejar el proceso de codificación de URL de datos para solicitudes POST, eliminando la necesidad de manipular los datos con transformRequest o usando dependencias externas como jQuery:

1. $httpParamSerializerJQLike - un serializador inspirado en jQuery''s .param() ( recomendado )

2. $httpParamSerializer : un serializador utilizado por Angular para solicitudes GET

Ejemplo de uso

$http({
  url: ''some/api/endpoint'',
  method: ''POST'',
  data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller
  headers: {
    ''Content-Type'': ''application/x-www-form-urlencoded'' // Note the appropriate header
  }
}).success(function(response) { /* do something here */ });

Vea una demostración más detallada de Plunker

¿En qué se $httpParamSerializerJQLike y $httpParamSerializer

En general, parece que $httpParamSerializer utiliza un formato de codificación de url menos "tradicional" que $httpParamSerializerJQLike cuando se trata de estructuras de datos complejas.

Por ejemplo (ignorando el porcentaje de codificación de corchetes):

• Codificando una matriz

{sites:[''google'', ''Facebook'']} // Object with array property

sites[]=google&sites[]=facebook // Result with $httpParamSerializerJQLike

sites=google&sites=facebook // Result with $httpParamSerializer

• Codificando un objeto

{address: {city: ''LA'', country: ''USA''}} // Object with object property

address[city]=LA&address[country]=USA // Result with $httpParamSerializerJQLike

address={"city": "LA", country: "USA"} // Result with $httpParamSerializer

Answer 2

Así es como debe ser (y por favor, no hay cambios en el servidor ... ciertamente no ... si su stack frontal no es compatible con application/x-www-form-urlencoded , entonces tírelo ... ¡con suerte AngularJS lo hace!

$http({
     method: ''POST'',
     url: ''api_endpoint'',
     headers: {''Content-Type'': ''application/x-www-form-urlencoded''},
     data: ''username=''+$scope.username+''&password=''+$scope.password
 }).then(function(response) {
    // on success
 }, function(response) {
    // on error
 });

Funciona como un encanto con AngularJS 1.5

Gente, déjenos dar algunos consejos:

• use promesas .then(success, error) cuando se trata de $http , olvídese de las devoluciones de llamada .sucess y .error (ya que están en desuso)

• Desde el sitio angularjs here " Ya no puede usar la cadena JSON_CALLBACK como marcador de posición para especificar a dónde debe ir el valor del parámetro de devolución de llamada " .

Si su modelo de datos es más complejo que solo un nombre de usuario y una contraseña, aún puede hacer eso (como se sugirió anteriormente)

$http({
     method: ''POST'',
     url: ''api_endpoint'',
     headers: {''Content-Type'': ''application/x-www-form-urlencoded''},
     data: json_formatted_data,
     transformRequest: function(data, headers) {
          return transform_json_to_urlcoded(data); // iterate over fields and chain key=value separated with &, using encodeURIComponent javascript function
     }
}).then(function(response) {
  // on succes
}, function(response) {
  // on error
});

El documento para el encodeURIComponent se puede encontrar here

Answer 3

Aunque fue una respuesta tardía, encontré que el angular UrlSearchParams funcionó muy bien para mí, también se encarga de la codificación de parámetros.

let params = new URLSearchParams();
params.set("abc", "def");

let headers = new Headers({ ''Content-Type'': ''application/x-www-form-urlencoded''});
let options = new RequestOptions({ headers: headers, withCredentials: true });
this.http
.post(UrlUtil.getOptionSubmitUrl(parentSubcatId), params, options)
.catch();

Answer 4

Creo que lo que debes hacer es transformar tus datos de un objeto a una cadena JSON, pero a url params.

Del blog de Ben Nadel .

Por defecto, el servicio $ http transformará la solicitud saliente serializando los datos como JSON y luego publicándolos con el tipo de contenido "application / json". Cuando queremos publicar el valor como una publicación FORM, tenemos que cambiar el algoritmo de serialización y publicar los datos con el tipo de contenido, "application / x-www-form-urlencoded".

Ejemplo de aquí .

$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: {username: $scope.userName, password: $scope.password}
}).success(function () {});

Answer 5

Desde $http docs esto debería funcionar ...

  $http.post(url, data,{headers: {''Content-Type'': ''application/x-www-form-urlencoded''}})
    .success(function(response) {
         // your code...
     });

Answer 6

El problema es el formato de cadena JSON. Puede usar una cadena de URL simple en los datos:

$http({
    method: ''POST'',
    url: url,
    headers: {''Content-Type'': ''application/x-www-form-urlencoded''},
    data: ''username=''+$scope.userName+''&password=''+$scope.password
}).success(function () {});

Answer 7

Esto funcionó para mí. Uso angular para front-end y laravel php para back-end. En mi proyecto, la web angular envía datos json al back-end de laravel.

Este es mi controlador angular.

var angularJsApp= angular.module(''angularJsApp'',[]);
angularJsApp.controller(''MainCtrl'', function ($scope ,$http) {

    $scope.userName ="Victoria";
    $scope.password ="password"


       $http({
            method :''POST'',
            url:''http://api.mywebsite.com.localhost/httpTest?callback=JSON_CALLBACK'',
            data: { username :  $scope.userName , password: $scope.password},
            headers: {''Content-Type'': ''application/json''}
        }).success(function (data, status, headers, config) {
            console.log(''status'',status);
            console.log(''data'',status);
            console.log(''headers'',status);
        });

});

Este es mi controlador de latencia de back-end php.

public function httpTest(){
        if (Input::has(''username'')) {
            $user =Input::all();
            return  Response::json($user)->setCallback(Input::get(''callback''));
        }
    }

Este es mi enrutamiento laravel

Route::post(''httpTest'',''HttpTestController@httpTest'');

El resultado en el navegador es

estado 200
datos JSON_CALLBACK ({"nombre de usuario": "Victoria", "contraseña": "contraseña", "devolución de llamada": "JSON_CALLBACK"}); httpTesting.js: función de encabezados 18 (c) {a || (a = sc (b)); return c? a [K (c)] || null: a}

Hay una extensión de Chrome llamada cartero. Puede usar para probar su url de back-end, ya sea que esté funcionando o no. https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en

con suerte, mi respuesta te ayudará.

Answer 8

Si es un formulario, intente cambiar el encabezado a:

headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";

y si no es una forma y un json simple, intente con este encabezado:

headers[ "Content-type" ] = "application/json";

Answer 9

Todos estos parecen excesivos (o no funcionan) ... simplemente haz esto:

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

Answer 10

necesitas publicar un objeto JavaScript simple, nada más

           var request = $http({
                method: "post",
                url: "process.cfm",
                transformRequest: transformRequestAsFormPost,
                data: { id: 4, name: "Kim" }
            });

            request.success(
                function( data ) {
                    $scope.localData = data;
                }
            );

si tienes php como back-end, entonces necesitarás hacer algunas modificaciones más. revisa este enlace para arreglar el lado del servidor php

Answer 11

$http({

    method: "POST",
    url: "/server.php",
    headers: { ''Content-Type'': ''application/x-www-form-urlencoded'' },
    data: "name=''Олег''&age=''28''",


}).success(function(data, status) {
    console.log(data);
    console.log(status);
});