Comment puis-je afficher des données de formulaire codées par URL avec $http sans jQuery?

variables d'encodage D'URL utilisant uniquement les services AngularJS

avec AngularJS 1.4 et plus, deux services peuvent gérer le processus de données d'encodage d'url pour les requêtes POST, éliminant la nécessité de manipuler les données avec transformRequest ou en utilisant des dépendances externes comme jQuery:

1. $httpParamSerializerJQLike - un sérialisateur inspiré de "151950920 de jQuery" ( recommandé )

2. $httpParamSerializer - un sérialiseur utilisé par Angular lui-même pour les requêtes GET

exemple d'usage

$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
  }
}).then(function(response) { /* do something here */ });

voir une démo de Plunker plus verbeuse

Comment sont $httpParamSerializerJQLike et $httpParamSerializer différents

en général, il semble que $httpParamSerializer utilise un format d'encodage d'url moins" traditionnel "que $httpParamSerializerJQLike lorsqu'il s'agit de structures de données complexes.

par exemple (sans tenir compte du pourcentage d'encodage des parenthèses):

• Encoding un tableau

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

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

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

• le Codage d'un objet

{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

tout cela ressemble à une overkill (ou ne fonctionne pas)... faites ceci:

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

le problème est le format de chaîne de JSON, vous pouvez utiliser une chaîne D'URL simple dans les données:

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

Voici comment cela devrait être (et s'il vous plaît pas de changements d'arrière-plan ... certainement pas ... si votre pile frontale ne supporte pas application/x-www-form-urlencoded , jetez-la ... espérons Qu'AngularJS le fasse !

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

fonctionne comme un charme avec AngularJS 1.5

les gens, laissez-vous conseiller:

• utiliser des promesses .then(success, error) lorsque vous traitez avec des $http , oublier .sucess et .error rappels (comme ils sont en train d'être obsolète)

• du site d'angularjs ici " vous ne pouvez plus utiliser la chaîne JSON_CALLBACK comme paramètre pour spécifier où doit aller la valeur du paramètre callback.

si votre modèle de données est plus complexe qu'un simple nom d'utilisateur et un mot de passe, vous pouvez encore le faire (comme suggéré ci-dessus)

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

Document pour le encodeURIComponent peut être trouvé ici

De la $http docs cela devrait fonctionner..

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

Si c'est une forme d'essayer de changer l'en-tête:

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

et si ce n'est pas une forme et un simple json alors essayer cet en-tête:

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

vous devez poster un objet javascript simple, rien d'autre""

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

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

si vous avez php comme back-end alors vous aurez besoin de faire quelques modifications supplémentaires.. checkout ce lien pour la fixation côté serveur php

bien qu'une réponse tardive, J'ai trouvé que les UrlSearchParams angulaires fonctionnaient très bien pour moi, il prend soin de l'encodage des paramètres ainsi.

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

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

ça a marché pour moi. J'utilise angular pour front-end et laravel php pour back-end. Dans mon projet, angular web envoie des données JSON à laravel back-end.

c'est mon régulateur angulaire.

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

});

c'est mon contrôleur laravel en php.

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

C'est mon trajet laravel

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

le résultat dans navigateur est

statut 200

les données JSON_CALLBACK({"nom":"Victoria","mot de passe":"mot de passe","rappel":"JSON_CALLBACK"}); httpTesting.js: 18 fonction des en-têtes(c){A|| / (A=sc (b)); retour c?[K(c)]||null:un}

il y a une extension de chrome appelée postman. Vous pouvez utiliser pour tester votre url si cela fonctionne ou pas. https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en

j'espère que ma réponse vous aidera.