Wie übermittle ich URL-codierte Formulardaten mit $http von AngularJS ohne jQuery?

URL-codierte Formulardaten mit $http ohne jQuery senden

In AngularJS ist das Erstellen von AJAX-Anfragen mit $http eine häufig angegangene Aufgabe. Allerdings kann das Senden von URL-codierten Formulardaten ohne Verwendung von jQuery eine Herausforderung für Anfänger sein.

Fehlgeschlagene Ansätze

Die genannten Ansätze, wie z. B. die Verwendung von Daten: {Benutzername : $scope.userName, Passwort: $scope.password} oder Parameter: {Benutzername: $scope.userName, Passwort: $scope.password}, ​​wird Codieren Sie die Daten nicht richtig im URL-Format.

Richtige Lösung

Um die gewünschte Funktionalität zu erreichen, bietet der $http-Dienst von Angular eine transformRequest-Funktion, die eine benutzerdefinierte Datentransformation vor dem Senden ermöglicht es auf den Server.

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

Erweiterte Lösung (AngularJS V1.4 und Später)

AngularJS-Versionen 1.4 und höher haben neue Dienste eingeführt, die speziell für URL-Kodierungsparameter entwickelt wurden. Mithilfe dieser Dienste kann der Prozess weiter vereinfacht werden:

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

Das obige ist der detaillierte Inhalt vonWie übermittle ich URL-codierte Formulardaten mit $http von AngularJS ohne jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!