AngularJS übergibt Daten an $ http.get request


577

Ich habe eine Funktion, die eine http POST-Anfrage ausführt. Der Code ist unten angegeben. Das funktioniert gut.

 $http({
   url: user.update_path, 
   method: "POST",
   data: {user_id: user.id, draft: true}
 });

Ich habe eine andere Funktion für http GET und möchte Daten an diese Anfrage senden. Aber ich habe diese Option nicht in get.

 $http({
   url: user.details_path, 
   method: "GET",
   data: {user_id: user.id}
 });

Die Syntax für http.getist

get (url, config)

Antworten:


942

Eine HTTP-GET-Anforderung darf keine Daten enthalten, die an den Server gesendet werden sollen. Sie können der Anforderung jedoch eine Abfragezeichenfolge hinzufügen.

angle.http bietet dafür eine Option namens params.

$http({
    url: user.details_path, 
    method: "GET",
    params: {user_id: user.id}
 });

Siehe: http://docs.angularjs.org/api/ng.$http#get und https://docs.angularjs.org/api/ng/service/$http#usage (zeigt den paramsParameter)


17
Dies wird ein Versprechen zurückgeben
Connor Leech

1
Der Code mit dem Versprechen: $ http ({Methode: 'GET', URL: '/ someUrl'}). Erfolg (Funktion (Daten, Status, Header, Konfiguration) {// Dieser Rückruf wird asynchron aufgerufen // wenn die Antwort verfügbar ist}). Fehler (Funktion (Daten, Status, Header, Konfiguration) {// asynchron aufgerufen, wenn ein Fehler auftritt // oder der Server eine Antwort mit einem Fehlerstatus zurückgibt.});
Ehud Grand

130
Angular bietet auch die Funktionalität in der $http.get(url.details_path, {params: {user_id: user.id}}).
Enpenax

15
Es wäre schön gewesen, den Objektschlüssel zwischen HTTP-Verben konsistent zu halten ... Daten für POST und Parameter für GET zu haben, ist nicht intuitiv.
Hubert Perron

7
@HubertPerron Eigentlich ist es nicht intuitiv, da dies verschiedene Dinge sind: DATA kann ein Objekt / Modell darstellen, sogar verschachtelt, und wird Teil des POST-Headers ... PARAMS stellen dar, was Sie der GET-URL hinzufügen können, wobei jede Eigenschaft a darstellt Teil des Querystrings in der URL. Es ist gut, dass sie unterschiedliche Namen haben, weil Sie sich der Tatsache bewusst werden, dass Sie etwas anderes tun.
Jos

520

Sie können Parameter direkt an $http.get()Folgendes übergeben

$http.get(user.details_path, {
    params: { user_id: user.id }
});

2
Dies funktioniert, aber das params-Objekt wird in String konvertiert. Wie behalte ich das Originalobjekt?
wdphd

13
@wdphd Es ist HTTP inhärent, dass es in eine Abfragezeichenfolge codiert wird
Uli Köhler

1
@Uli Köhler: Ja, das habe ich verpasst. Ich habe nach dem Vorbild des UI-Routers gedacht, wo Sie den Datentyp params angeben können. Dies wurde mit einem einfachen parseInt im Backend behoben.
wdphd

2
Dies ist die richtige Lösung, wenn Sie der angegebenen URL GET-Parameter hinzufügen möchten, und funktioniert einwandfrei.
Enpenax


43

Ab AngularJS v1.4.8 können Sie get(url, config) Folgendes verwenden:

var data = {
 user_id:user.id
};

var config = {
 params: data,
 headers : {'Accept' : 'application/json'}
};

$http.get(user.details_path, config).then(function(response) {
   // process response here..
 }, function(response) {
});

1
Diese Daten befinden sich jedoch immer noch nicht in einem Anforderungshauptteil.
NaXa

@naXa GET sollte nur gemäß Konvention URL-Parameter sein, so dass viele Frameworks es nicht erlauben, Best Practices durchzusetzen, selbst wenn es technisch funktionieren und sinnvoll sein könnte.
Christophe Roussy

1
Wenn nur die AngularJS-Dokumentation dieses einfache Beispiel hätte liefern können!
Norbert Norbertson

@Arpit Aggarwal Würdest du so nett sein, wenn du dir meine ähnliche Frage mit golang web server und vue.js ansiehst? stackoverflow.com/questions/61520048/…
user2315094

33

Lösung für diejenigen, die daran interessiert sind, Parameter und Header in einer GET-Anfrage zu senden

$http.get('https://www.your-website.com/api/users.json', {
        params:  {page: 1, limit: 100, sort: 'name', direction: 'desc'},
        headers: {'Authorization': 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='}
    }
)
.then(function(response) {
    // Request completed successfully
}, function(x) {
    // Request error
});

Das vollständige Servicebeispiel sieht folgendermaßen aus

var mainApp = angular.module("mainApp", []);

mainApp.service('UserService', function($http, $q){

   this.getUsers = function(page = 1, limit = 100, sort = 'id', direction = 'desc') {

        var dfrd = $q.defer();
        $http.get('https://www.your-website.com/api/users.json', 
            {
                params:{page: page, limit: limit, sort: sort, direction: direction},
                headers: {Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='}
            }
        )
        .then(function(response) {
            if ( response.data.success == true ) { 

            } else {

            }
        }, function(x) {

            dfrd.reject(true);
        });
        return dfrd.promise;
   }

});

Wie würden die Antwortdaten in einer Steuerung verwendet? Vielen Dank.
Floris

3

Sie können die Parameter sogar einfach am Ende der URL hinzufügen:

$http.get('path/to/script.php?param=hello').success(function(data) {
    alert(data);
});

Gepaart mit script.php:

<? var_dump($_GET); ?>

Daraus resultiert die folgende Javascript-Warnung:

array(1) {  
    ["param"]=>  
    string(4) "hello"
}

2
Entkommt $ http?
Michael Cole

2
Dies funktioniert auch, aber das Problem dabei ist, dass es bei mehreren Parametern schwierig wird, diese am Ende der URL hinzuzufügen. Wenn Sie einen Variablennamen ändern, müssen Sie ihn auch in der URL ändern.
user3718908

Ich kenne. Es war eher eine Demonstration, die zeigte, dass man es sogar normal machen kann , ich empfehle es nicht unbedingt. (Wo "normaler Weg" bedeutet, wie Sie es wahrscheinlich jahrelang mit PHP gemacht haben)
Jeffrey Roosendaal

2

Hier ist ein vollständiges Beispiel einer HTTP-GET-Anforderung mit Parametern unter Verwendung von angle.js in ASP.NET MVC:

REGLER:

public class AngularController : Controller
{
    public JsonResult GetFullName(string name, string surname)
    {
        System.Diagnostics.Debugger.Break();
        return Json(new { fullName = String.Format("{0} {1}",name,surname) }, JsonRequestBehavior.AllowGet);
    }
}

AUSSICHT:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript">
    var myApp = angular.module("app", []);

    myApp.controller('controller', function ($scope, $http) {

        $scope.GetFullName = function (employee) {

            //The url is as follows - ControllerName/ActionName?name=nameValue&surname=surnameValue

            $http.get("/Angular/GetFullName?name=" + $scope.name + "&surname=" + $scope.surname).
            success(function (data, status, headers, config) {
                alert('Your full name is - ' + data.fullName);
            }).
            error(function (data, status, headers, config) {
                alert("An error occurred during the AJAX request");
            });

        }
    });

</script>

<div ng-app="app" ng-controller="controller">

    <input type="text" ng-model="name" />
    <input type="text" ng-model="surname" />
    <input type="button" ng-click="GetFullName()" value="Get Full Name" />
</div>

IMHO Die Syntax mit paramsist weniger fehleranfällig als eine "manuelle" URL concat
Christophe Roussy

1

Zum Senden get Anfrage mit Parameter verwende ich

  $http.get('urlPartOne\\'+parameter+'\\urlPartTwo')

Auf diese Weise können Sie Ihre eigene URL-Zeichenfolge verwenden

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.