Comment puis-je POSTER des données de formulaire encodées en url avec $ http sans jQuery?

Je suis nouveau sur AngularJS, et pour commencer, j'ai pensé développer une nouvelle application utilisant uniquement AngularJS.

J'essaie de faire un appel AJAX côté serveur, à l'aide $httpde mon application angulaire.

Pour envoyer les paramètres, j'ai essayé ce qui suit:

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

Cela fonctionne, mais il utilise également jQuery sur $.param. Pour supprimer la dépendance sur jQuery, j'ai essayé:

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

mais cela semblait échouer. J'ai ensuite essayé params:

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

mais cela a également semblé échouer. J'ai ensuite essayé JSON.stringify:

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

J'ai trouvé ces réponses possibles à ma quête, mais sans succès. Est-ce que je fais quelque chose de mal? Je suis sûr qu'AngularJS fournirait cette fonctionnalité, mais comment?

Je pense que vous devez faire est de transformer vos données d'objet non pas en chaîne JSON, mais en paramètres url.

Sur le blog de Ben Nadel .

Par défaut, le service $ http transformera la demande sortante en sérialisant les données en JSON puis en les affichant avec le type de contenu "application / json". Lorsque nous voulons publier la valeur en tant que publication FORM, nous devons modifier l'algorithme de sérialisation et publier les données avec le type de contenu, "application / x-www-form-urlencoded".

Exemple d'ici .

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

METTRE À JOUR

Pour utiliser les nouveaux services ajoutés avec AngularJS V1.4, consultez

• Variables de codage d'URL utilisant uniquement les services AngularJS

Variables de codage d'URL utilisant uniquement les services AngularJS

Avec AngularJS 1.4 et versions ultérieures, deux services peuvent gérer le processus de codage d'url des données pour les requêtes POST, éliminant ainsi la nécessité de manipuler les données avec transformRequestou en utilisant des dépendances externes comme jQuery:

1. $httpParamSerializerJQLike- un sérialiseur inspiré de jQuery .param()( recommandé )

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

Exemple d'utilisation

$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 Plunker plus détaillée

Comment sont $httpParamSerializerJQLikeet $httpParamSerializerdifférents

En général, il semble $httpParamSerializerutiliser un format de codage d'URL moins "traditionnel" que $httpParamSerializerJQLikelorsqu'il s'agit de structures de données complexes.

Par exemple (en ignorant le pourcentage de codage des crochets):

• Encodage d'un tableau

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

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

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

• Encodage 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

Tous ces éléments semblent exagérés (ou ne fonctionnent pas) ... faites simplement ceci:

$http.post(loginUrl, `username=${ encodeURIComponent(username) }` +
                     `&password=${ encodeURIComponent(password) }` +
                     '&grant_type=password'
).success(function (data) {

Le problème est le format de chaîne JSON, vous pouvez utiliser une chaîne 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 veuillez ne pas modifier le backend ... certainement pas ... si votre pile avant ne prend pas en charge application/x-www-form-urlencoded, alors jetez-le ... avec un peu de chance, AngularJS le fait!

$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 donner quelques conseils:

• Utilisez des promesses .then(success, error)lorsque vous traitez $http, oubliez .sucesset .errorrappelez (car ils sont dépréciés)

• Sur le site angularjs ici " Vous ne pouvez plus utiliser la chaîne JSON_CALLBACK comme espace réservé pour spécifier où la valeur du paramètre de rappel doit aller. "

Si votre modèle de données est plus complexe que juste un nom d'utilisateur et un mot de passe, vous pouvez toujours 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
});

Le document pour le encodeURIComponentpeut être trouvé ici

S'il s'agit d'un formulaire, essayez de remplacer l'en-tête par:

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

et si ce n'est pas un formulaire et un simple json alors essayez cet en-tête:

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

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

À partir des documents $ http, cela devrait fonctionner.

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

vous devez publier un simple objet javascript, 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, vous devrez effectuer quelques modifications supplémentaires. consultez ce lien pour corriger le côté serveur php

Bien qu'une réponse tardive, j'ai trouvé que UrlSearchParams angulaire fonctionnait très bien pour moi, il prend également en charge le codage des paramètres.

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

Cela a fonctionné pour moi. J'utilise angular pour le front-end et laravel php pour le back-end. Dans mon projet, le web angulaire envoie des données json au back-end de laravel.

Ceci est mon contrôleur 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);
        });

});

Ceci est mon contrôleur laravel php back-end.

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

Ceci est mon routage laravel

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

Le résultat dans le navigateur est

données d' état 200 JSON_CALLBACK ({"username": "Victoria", "password": "password", "callback": "JSON_CALLBACK"}); httpTesting.js: fonction 18 en-têtes (c) {a || (a = sc (b)); retourne c? a [K (c)] || null: a}

Il existe une extension chrome appelée postman. Vous pouvez utiliser pour tester votre URL principale, qu'elle fonctionne ou non. https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en

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