wake-up-neo.com

analyse der Antwort von JSONP $ http.jsonp () in angle.js

Ich verwende die $http.jsonp()-Anforderung von winkle, die erfolgreich json zurückgibt, das in eine Funktion eingeschlossen ist:

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

Wie kann ich auf die zurückgegebenen funktionsumhüllten JSONs zugreifen/diese analysieren?

javascriptangularjsjsonp
112
akronymn

UPDATE: seit Angular 1.6

Sie können die Zeichenfolge JSON_CALLBACK nicht mehr als Platzhalter verwenden, um anzugeben, wohin der Rückrufparameterwert verschoben werden soll

Sie müssen den Callback nun folgendermaßen definieren:

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

Parameter über $http.defaults.jsonpCallbackParam ändern/aufrufen/deklarieren, Standardwert ist callback

Hinweis: Sie müssen auch sicherstellen, dass Ihre URL zur Liste der vertrauenswürdigen Adressen/Whitelists hinzugefügt wird:

$sceDelegateProvider.resourceUrlWhitelist

oder ausdrücklich vertrauenswürdig über:

$sce.trustAsResourceUrl(url)

success/error waren veraltet.

Die $http alten Versprechungsmethoden success und error sind veraltet und werden in Version 1.6.0 entfernt. Verwenden Sie stattdessen die Standard-then-Methode. Wenn $httpProvider.useLegacyPromiseExtensions auf false gesetzt ist, werden diese Methoden $http/legacy error auslösen.

BENUTZEN:

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

Vorherige Antwort: Angular 1.5.x und vorher

Alles, was Sie tun müssen, ist, callback=jsonp_callback in callback=JSON_CALLBACK wie folgt zu ändern:

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

Und dann sollte Ihre .success -Funktion so ausgelöst werden, wie Sie es haben, wenn die Rückgabe erfolgreich war.

Auf diese Weise müssen Sie den globalen Raum nicht beschmutzen. Dies ist in der AngularJS-Dokumentation dokumentiert hier .

Matt Balls Geige wurde aktualisiert, um diese Methode zu verwenden: http://jsfiddle.net/subhaze/a4Rc2/114/

Vollständiges Beispiel: 

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

Das WICHTIGSTE WICHTIGSTE DING, das ich eine ganze Weile nicht verstanden habe, ist, dass die Anforderung MUSS "callback = JSON_CALLBACK" enthält, da AngularJS die Anforderungs-URL ändert, und ersetzt eine eindeutige Kennung für "JSON_CALLBACK". Die Serverantwort muss den Wert des Parameters 'callback' verwenden, anstatt "JSON_CALLBACK" hart zu codieren:

JSON_CALLBACK(json_response);  // wrong!

Da ich mein eigenes PHP Serverskript schrieb, dachte ich, ich wüsste, welchen Funktionsnamen es wollte und brauche nicht "callback = JSON_CALLBACK" in der Anfrage zu übergeben. Großer Fehler!

AngularJS ersetzt "JSON_CALLBACK" in der Anforderung durch einen eindeutigen Funktionsnamen (wie "callback = angle.callbacks._0"), und die Serverantwort muss diesen Wert zurückgeben:

angular.callbacks._0(json_response);
70
Joseph Oster

Das war sehr hilfreich. Angular funktioniert nicht genau wie JQuery. Es hat eine eigene jsonp () -Methode, für die tatsächlich "& callback = JSON_CALLBACK" am Ende der Abfragezeichenfolge erforderlich ist. Hier ist ein Beispiel:

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

Anschließend können Sie {{data}} in Ihrer Angular-Vorlage anzeigen oder bearbeiten.

8
Peter

Dies sollte für Sie gut funktionieren, solange die Funktion jsonp_callback im globalen Gültigkeitsbereich sichtbar ist:

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

Vollständige Demo: http://jsfiddle.net/mattball/a4Rc2/ (Haftungsausschluss: Ich habe noch nie einen AngularJS-Code geschrieben.)

5
Matt Ball

Sie müssen noch callback in den Parametern einstellen:

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

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

Dabei ist 'Funktionsname' eine stringifizierte Referenz auf eine global definierte Funktion. Sie können es außerhalb Ihres Winkelskripts definieren und dann in Ihrem Modul neu definieren.

4
paradite

Für das Parsen tun Sie dies-

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

Oder Sie können .__ verwenden. $ Scope.data = JSON.Stringify (Daten);

In der Angular-Vorlage können Sie es als verwenden

{{data}}
2
user1547535

für mich funktionierten die oben genannten Lösungen nur einmal, wenn ich den Anfrageparametern "format = jsonp" hinzufügte.

0
Tali

Ich verwende Winkel 1.6.4 und die Antwort von subhaze hat für mich nicht funktioniert. Ich habe es ein wenig geändert und dann hat es funktioniert - Sie müssen einen von $ sce.trustAsResourceUrl zurückgegebenen Wert verwenden. Vollständiger Code:

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