de jquery $ .ajax à angular $ http


122

J'ai ce morceau de code jQuery qui fonctionne bien à l'origine croisée:

jQuery.ajax({
    url: "http://example.appspot.com/rest/app",
    type: "POST",
    data: JSON.stringify({"foo":"bar"}),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (response) {
        console.log("success");
    },
    error: function (response) {
        console.log("failed");
    }
});

Maintenant, je suis en train de convertir cela en code Angular.js sans succès:

$http({
    url: "http://example.appspot.com/rest/app",
    dataType: "json",
    method: "POST",
    data: JSON.stringify({"foo":"bar"}),
    headers: {
        "Content-Type": "application/json; charset=utf-8"
    }
}).success(function(response){
    $scope.response = response;
}).error(function(error){
    $scope.error = error;
});

Toute aide appréciée.


3
Je ne sais pas angular.js mais peut-être que faile () est un mauvais nom pour une fonction?
Bogdan Rybak

trouvé un autre problème simulaire stackoverflow.com/questions/11786562/…
sans fin

aurait pu trouver une solution stackoverflow.com/questions/12111936/… besoin de creuser profondément ...
Sans fin

La demande OPTIONS sera émise par un navigateur, elle sera transparente pour AngularJS / votre application. Si l'OPTION réussit, la requête d'origine (POST / GET / peu importe) suivra et votre code sera rappelé pour la requête principale et non pour l'OPTION.
pkozlowski.opensource

Ce n'est probablement pas Angular de changer la méthode de requête en OPTIONS. C'est probablement votre navigateur qui vérifie s'il peut faire une requête CORS. Si vous essayez de passer un appel vers un domaine distinct, votre navigateur fera d'abord une demande OPTIONS pour voir si cela est autorisé.
Ian

Réponses:


202

La manière AngularJS d'appeler $ http ressemblerait à ceci:

$http({
    url: "http://example.appspot.com/rest/app",
    method: "POST",
    data: {"foo":"bar"}
}).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.data = response.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.error = response.statusText;
});

ou pourrait être écrit encore plus simple en utilisant des méthodes de raccourci:

$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
.then(successCallback, errorCallback);

Il y a un certain nombre de choses à remarquer:

  • La version AngularJS est plus concise (en particulier en utilisant la méthode .post ())
  • AngularJS se chargera de la conversion des objets JS en chaîne JSON et de la définition des en-têtes (ceux-ci sont personnalisables)
  • Les fonctions de rappel sont nommées successet errorrespectivement (veuillez également noter les paramètres de chaque rappel) - Obsolète dans angular v1.5
  • utilisez thenplutôt la fonction.
  • Plus d'informations sur l' thenutilisation peuvent être trouvées ici

Ce qui précède n'est qu'un exemple rapide et quelques pointeurs, assurez-vous de consulter la documentation AngularJS pour en savoir plus: http://docs.angularjs.org/api/ng.$http


2
Bon à savoir! Cependant, je ne pense pas à l'erreur du client que je traite, Angular change la méthode Request en OPTIONS. pense que je dois faire des trucs côté serveur pour le supporter
sans fin

Oui, je suppose que vous devez d'abord régler les problèmes côté serveur. Ensuite, vous pourrez profiter de toute la puissance de $ http d'angular côté client. Vous voyez probablement une demande OPTIONS supplémentaire car AngularJS envoie plus d'en-têtes / différents par rapport à jQuery.
pkozlowski.opensource

1
REMARQUE: dans get "params:" mais pas "data:" voir stackoverflow.com/questions/13760070
...

5
paramset il datay a 2 choses différentes: les paramètres se retrouvent dans l'URL (chaîne de requête) tandis que les données - dans le corps de la requête (uniquement pour les types de requête qui peuvent réellement avoir un corps).
pkozlowski.opensource

"Angular change la méthode Request en OPTIONS. Je pense que je dois faire des choses côté serveur pour le supporter" J'ai le même problème, qu'est-ce que angular ajoute que jquery ne fonctionne pas?
Andrew Luhring

1

Nous pouvons implémenter la requête ajax en utilisant le service http dans AngularJs, ce qui permet de lire / charger des données à partir d'un serveur distant.

Les méthodes de service $ http sont répertoriées ci-dessous,

 $http.get()
 $http.post()
 $http.delete()
 $http.head()
 $http.jsonp()
 $http.patch()
 $http.put()

Un des exemples:

    $http.get("sample.php")
        .success(function(response) {
            $scope.getting = response.data; // response.data is an array
    }).error(){

        // Error callback will trigger
    });

http://www.drtuts.com/ajax-requests-angularjs/



-5

vous pouvez utiliser $ .param pour attribuer des données:

 $http({
  url: "http://example.appspot.com/rest/app",
  method: "POST",
  data: $.param({"foo":"bar"})
  }).success(function(data, status, headers, config) {
   $scope.data = data;
  }).error(function(data, status, headers, config) {
   $scope.status = status;
 });

Regardez ceci: AngularJS + ASP.NET Web API Cross-Domain Issue


4
Juste une note que $ .param est jQuery, donc vous aurez besoin de jQuery chargé pour l'utiliser. Pour un exemple sans jQuery utilisant l'intercepteur $ http transformRequest, voir pastebin.com/zsn9ASkM
Brian

@Brian Attendez une minute, jQuery n'est-il pas une dépendance d'AngularJS? Vous n'aurez jamais $ http sans que jQuery soit d'abord chargé.
jnm2

2
@ jnm2 - non, jQuery n'est pas une dépendance d'AngularJS. $ http fait référence au composant de service Angular $ http , et non à rien de jQuery. AngularJS a un "jQuery Lite" disponible pour manipuler le DOM, mais il est très limité. From Angular element - Si jQuery est disponible, angular.element est un alias pour la fonction jQuery. Si jQuery n'est pas disponible, angular.element délègue au sous-ensemble intégré de jQuery d'Angular, appelé «jQuery lite» ou «jqLite».
Brian
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.