Comment soumettre des données de formulaire codées en URL avec $http d'AngularJS sans jQuery ?

Soumission de données de formulaire codées en URL avec $http sans jQuery

Dans AngularJS, effectuer des requêtes AJAX avec $http est une tâche couramment abordée. Cependant, soumettre des données de formulaire codées en URL sans recourir à jQuery peut être un défi pour les débutants.

Approches ayant échoué

Les approches mentionnées, telles que l'utilisation de données : {username : $scope.userName, mot de passe : $scope.password} ou params : {username : $scope.userName, mot de passe : $scope.password}, ​​ne le sera pas encoder correctement les données au format URL.

Solution correcte

Pour obtenir la fonctionnalité souhaitée, le service $http d'Angular propose une fonction transformRequest qui permet une transformation personnalisée des données avant de les envoyer au serveur.

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

Solution améliorée (AngularJS V1.4 et Plus tard)

Les versions 1.4 et ultérieures d'AngularJS ont introduit de nouveaux services spécifiquement conçus pour les paramètres de codage d'URL. Grâce à ces services, le processus peut être encore simplifié :

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: angular.identity,
    params: {username: $scope.userName, password: $scope.password}
}).then(function () {});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!