analyse de la réponse JSONP $ http.jsonp () dans angular.js - javascript, angularjs, jsonp

J'utilise des "s angulaires" $http.jsonp() request qui renvoie avec succès json enveloppé dans une fonction:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback";

$http.jsonp(url).
success(function(data, status, headers, config) {
//what do I do here?
}).
error(function(data, status, headers, config) {
$scope.error = true;
});

Comment accéder / analyser le JSON-wrapped-function retourné?

Réponses:

293 pour la réponse № 1

MISE À JOUR: depuis Angular 1.6

Vous ne pouvez plus utiliser la chaîne JSON_CALLBACK comme espace réservé pour spécifier où la valeur du paramètre de rappel doit aller

Vous devez maintenant définir le rappel comme ceci:

$http.jsonp("some/trusted/url", {jsonpCallbackParam: "callback"})

Changer / accéder / déclarer le paramètre via $http.defaults.jsonpCallbackParam, par défaut à callback

Remarque: vous devez également vous assurer que votre URL est ajoutée à la liste approuvée / blanche:

$sceDelegateProvider.resourceUrlWhitelist

ou explicitement approuvé via:

$sce.trustAsResourceUrl(url)

success/error étaient déconseillé.

le $http méthodes de promesse héritées success et error sont obsolètes et seront supprimées dans la v1.6.0. Utilisez plutôt la méthode standard alors. Si $httpProvider.useLegacyPromiseExtensions est réglé sur false alors ces méthodes jetteront $http/legacy error.

UTILISATION:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts"
var trustedUrl = $sce.trustAsResourceUrl(url);

$http.jsonp(trustedUrl, {jsonpCallbackParam: "callback"})
.then(function(data){
console.log(data.found);
});

Réponse précédente: Angular 1.5.x et avant

Tout ce que tu devrais faire c'est changer callback=jsonp_callback à callback=JSON_CALLBACK ainsi:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";

Et puis votre .success La fonction devrait se déclencher comme vous l'avez si le retour a réussi.

Cela vous évite d'avoir à salir l'espace mondial. Ceci est documenté dans la documentation AngularJS ici.

Mise à jour du violon de Matt Ball pour utiliser cette méthode: http://jsfiddle.net/subhaze/a4Rc2/114/

Exemple complet:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";

$http.jsonp(url)
.success(function(data){
console.log(data.found);
});

---

70 pour la réponse № 2

le CHOSE LA PLUS IMPORTANTE Je n'ai pas compris pendant un certain temps que la demande DOIT contiennent "callback = JSON_CALLBACK", car AngularJS modifie l'url de la requête, en remplaçant un identifiant unique pour "JSON_CALLBACK". La réponse du serveur doit utiliser la valeur du paramètre "callback" au lieu du codage en dur "JSON_CALLBACK":

JSON_CALLBACK(json_response);  // wrong!

Depuis que j'écrivais mon propre script de serveur PHP, je pensais savoir quel nom de fonction il voulait et n'avais pas besoin de passer "callback = JSON_CALLBACK" dans la requête.

AngularJS remplace "JSON_CALLBACK" dans la requête par un nom de fonction unique (comme "callback = angular.callbacks._0"), et la réponse du serveur doit renvoyer cette valeur:

angular.callbacks._0(json_response);

---

8 pour la réponse № 3

Cela a été très utile. Angular ne fonctionne pas exactement comme JQuery. Il a sa propre méthode jsonp (), qui nécessite en effet "& callback = JSON_CALLBACK" à la fin de la chaîne de requête. Voici un exemple:

var librivoxSearch = angular.module("librivoxSearch", []);
librivoxSearch.controller("librivoxSearchController", function ($scope, $http) {
$http.jsonp("http://librivox.org/api/feed/audiobooks/author/Melville?format=jsonp&callback=JSON_CALLBACK").success(function (data) {
$scope.data = data;
});
});

Ensuite, affichez ou manipulez {{data}} dans votre modèle angulaire.

---

5 pour la réponse № 4

Cela devrait très bien fonctionner pour vous, tant que la fonction jsonp_callback est visible dans la portée globale:

function jsonp_callback(data) {
// returning from async callbacks is (generally) meaningless
console.log(data.found);
}

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback";

$http.jsonp(url);

Démo complète: http://jsfiddle.net/mattball/a4Rc2/ (avertissement: je n’ai jamais écrit de code AngularJS auparavant)

---

4 pour la réponse № 5

Vous devez encore définir callback dans les paramètres:

var params = {
"a": b,
"token_auth": TOKEN,
"callback": "functionName"
};
$sce.trustAsResourceUrl(url);

$http.jsonp(url, {
params: params
});

Où "functionName" est une référence stringifiée à une fonction définie globalement. Vous pouvez le définir en dehors de votre script angulaire puis le redéfinir dans votre module.

---

2 pour la réponse № 6

Pour l'analyse, faites ceci-

   $http.jsonp(url).
success(function(data, status, headers, config) {
//what do I do here?
$scope.data=data;
}).

Ou vous pouvez utiliser `$ scope.data = JSON.Stringify (données);

Dans le modèle angulaire, vous pouvez l'utiliser comme

{{data}}

---

0 pour la réponse № 7

pour moi, les solutions ci-dessus n'ont fonctionné qu'une fois que j'ai ajouté "format = jsonp" aux paramètres de la requête.

---

0 pour la réponse № 8

J'utilise angulaire 1.6.4 et la réponse fournie par brouiller n'a pas fonctionné pour moi. Je l'ai modifié un peu et puis cela a fonctionné - vous devez utiliser la valeur renvoyée par $ sce.trustAsResourceUrl. Code complet:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts"
url = $sce.trustAsResourceUrl(url);

$http.jsonp(url, {jsonpCallbackParam: "callback"})
.then(function(data){
console.log(data.found);
});

---