AngularJS transmettant des données à la demande $ http.get

577

J'ai une fonction qui fait une requête http POST. Le code est spécifié ci-dessous. Cela fonctionne bien.

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

J'ai une autre fonction pour http GET et je veux envoyer des données à cette demande. Mais je n'ai pas cette option dans get.

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

La syntaxe de http.getest

get (url, config)

Garçon grassouillet
la source

Réponses:

942

Une requête HTTP GET ne peut pas contenir de données à publier sur le serveur. Cependant, vous pouvez ajouter une chaîne de requête à la demande.

angular.http fournit une option pour cela appelée params.

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

Voir: http://docs.angularjs.org/api/ng.$http#get et https://docs.angularjs.org/api/ng/service/$http#usage (affiche le paramsparam)

Fredrik
la source
17
cela reviendra une promesse
Connor Leech
1
Le code avec la promesse: $ http ({méthode: 'GET', url: '/ someUrl'}). success (fonction (données, statut, en-têtes, config) {// ce rappel sera appelé de manière asynchrone // lorsque la réponse sera disponible}). error (fonction (données, état, en-têtes, config) {// appelé de manière asynchrone si une erreur se produit // ou si le serveur renvoie une réponse avec un état d'erreur.});
Ehud Grand
130
Angular fournit également la fonctionnalité dans le $http.get(url.details_path, {params: {user_id: user.id}}).
enpenax
15
Il aurait été bien de garder la clé d'objet cohérente entre les verbes HTTP ... avoir des données pour POST et des paramètres pour GET est contre-intuitif.
Hubert Perron
7
@HubertPerron En fait, ce n'est pas contre-intuitif car ce sont des choses différentes: DATA peut représenter un objet / modèle, même imbriqué, et devient une partie de l'en-tête POST ... PARAMS représente ce que vous pouvez ajouter à l'URL GET, où chaque propriété représente un partie de la chaîne de requête dans l'URL. C'est bien qu'ils aient des noms différents car cela vous fait prendre conscience du fait que vous faites quelque chose de différent.
Jos
520

Vous pouvez passer des paramètres directement à ce qui $http.get()suit fonctionne très bien

$http.get(user.details_path, {
    params: { user_id: user.id }
});
Rob
la source
2
Cela fonctionne, mais l'objet params est en cours de conversion en chaîne. Comment conserver l'objet d'origine?
wdphd
13
@wdphd Il est inhérent à HTTP qu'il sera encodé en une chaîne de requête
Uli Köhler
1
@Uli Köhler: Ouaip, j'ai raté ça. Je pensais le long des lignes du routeur UI où vous pouvez spécifier le type de données params. Corrigé cela avec un simple parseInt sur le backend.
wdphd
2
C'est la bonne solution si vous souhaitez ajouter des paramètres GET à l'URL donnée et fonctionne parfaitement bien.
enpenax
43

À partir d' AngularJS v1.4.8 , vous pouvez utiliser get(url, config) comme suit:

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) {
});
Arpit Aggarwal
la source
1
Mais ces données ne figurent toujours pas dans un corps de demande.
naXa
@naXa GET ne devrait être un paramètre d'URL que par convention, donc de nombreux frameworks ne lui permettront pas d'appliquer les meilleures pratiques, même si techniquement cela pourrait fonctionner et avoir du sens.
Christophe Roussy
1
Si seulement la documentation AngularJS aurait pu fournir cet exemple simple!
Norbert Norbertson
@Arpit Aggarwal seriez-vous si gentil en jetant un coup d'œil à ma question similaire avec le serveur Web Golang et vue.js? stackoverflow.com/questions/61520048/…
user2315094
33

Solution pour ceux qui souhaitent envoyer des paramètres et des en-têtes dans une demande GET

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

Un exemple de service complet ressemblera à ceci

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

});
Subodh Ghulaxe
la source
Comment les données de réponse seraient-elles utilisées dans un contrôleur? Merci.
Floris
3

Vous pouvez même simplement ajouter les paramètres à la fin de l'url:

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

Jumelé avec script.php:

<? var_dump($_GET); ?>

Résultat de l'alerte javascript suivante:

array(1) {  
    ["param"]=>  
    string(4) "hello"
}
Jeffrey Roosendaal
la source
2
$ http s'échappe-t-il?
Michael Cole
2
Cela fonctionne aussi, mais le problème est que lorsque vous avez plusieurs paramètres, il devient difficile de les ajouter à la fin de l'URL, plus si vous changez un nom de variable, vous devez venir le changer également dans l'URL.
user3718908
Je connais. C'était plus une démonstration, montrant que vous pouvez même le faire de façon régulière , je ne le recommande pas nécessairement. (Où «manière régulière» signifie comment vous l'avez probablement fait pendant des années avec php)
Jeffrey Roosendaal
2

Voici un exemple complet d'une demande HTTP GET avec des paramètres utilisant angular.js dans ASP.NET MVC:

MANETTE:

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

VUE:

<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>
Denys Wessels
la source
IMHO La syntaxe avec paramsest moins sujette aux erreurs qu'un concat url 'manuel'
Christophe Roussy
1

Pour envoyer une requête get avec le paramètre que j'utilise

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

Par cela, vous pouvez utiliser votre propre chaîne d'URL

moin khan
la source