аналіз JSONP $ http.jsonp () відповіді в angular.js

Я використовую $http.jsonp()запит angular, який успішно повертає json, загорнуту у функцію:

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

Як отримати доступ / проаналізувати повернуту функцію-JSON?

ОНОВЛЕННЯ: з кутового 1.6

Ви більше не можете використовувати рядок JSON_CALLBACK як заповнювач, щоб вказати, куди повинно йти значення параметра зворотного виклику

Тепер ви повинні визначити зворотний виклик так:

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

Змінити / отримати доступ / оголосити параметр через $http.defaults.jsonpCallbackParam, за замовчуванням наcallback

Примітка. Ви також повинні переконатися, що ваша URL-адреса додана до довіреного / білого списку:

$sceDelegateProvider.resourceUrlWhitelist

або явно довіряти через:

$sce.trustAsResourceUrl(url)

success/errorбули застарілими .

Ці $httpметоди обіцяють застарілі successі errorзастаріли і будуть видалені в v1.6.0. Використовуйте замість цього стандартний метод. Якщо $httpProvider.useLegacyPromiseExtensionsвстановлено значення, falseтоді ці методи будуть кинутими $http/legacy error.

ВИКОРИСТАННЯ:

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

Попередня відповідь: Кутовий 1.5.x і раніше

Всі ви повинні зробити , це змінити , callback=jsonp_callbackщоб callback=JSON_CALLBACKвиглядати приблизно так:

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

І тоді ваша .successфункція повинна спрацьовувати, як у вас, якщо повернення було успішним.

Це робиться таким чином, щоб уникнути забруднення глобального простору. Це зафіксовано в документації AngularJS тут .

Оновлено загадку Метта Балла, щоб використовувати цей метод: http://jsfiddle.net/subhaze/a4Rc2/114/

Повний приклад:

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

ГОЛОВНЕ я не зрозумів досить довго, що запит повинен містити «зворотний виклик = JSON_CALLBACK», тому що AngularJS модифікує запит URL , підставляючи унікальний ідентифікатор «JSON_CALLBACK». Відповідь сервера повинна використовувати значення параметра "зворотний виклик" замість жорсткого кодування "JSON_CALLBACK":

JSON_CALLBACK(json_response);  // wrong!

Оскільки я писав власний сценарій сервера PHP, я думав, що знаю, яку назву функції вона бажає, і мені не потрібно передавати "callback = JSON_CALLBACK" у запиті. Велика помилка!

AngularJS замінює "JSON_CALLBACK" у запиті унікальною назвою функції (наприклад, "callback = angular.callbacks._0"), і відповідь сервера повинна повернути це значення:

angular.callbacks._0(json_response);

Це було дуже корисно. Кутовий не працює точно так, як JQuery. У нього є власний метод jsonp (), який дійсно вимагає "& callback = JSON_CALLBACK" в кінці рядка запиту. Ось приклад:

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

Потім відображайте або маніпулюйте {{data}} у своєму кутовому шаблоні.

Це повинно працювати для вас добре, доки функція jsonp_callbackбуде видимою в глобальному масштабі:

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

Повна демонстрація: http://jsfiddle.net/mattball/a4Rc2/ (відмова від відповідальності: я ніколи раніше не писав жодного коду AngularJS)

Вам все-таки потрібно встановити callbackпарами:

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

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

Де 'functionName' - це строго посилання на глобально визначену функцію. Ви можете визначити його поза вашим кутовим сценарієм, а потім переглянути його у своєму модулі.

Для розбору зробіть це-

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

Або ви можете використовувати `$ range.data = JSON.Stringify (дані);

У кутовому шаблоні ви можете використовувати його як

{{data}}

для мене вищевказані рішення спрацювали лише один раз, коли я додав "format = jsonp" до параметрів запиту.

Я використовую кутовий 1.6.4, і відповідь, надана підгалузею , для мене не працювала. Я трохи змінив його, а потім він працював - ви повинні використовувати значення, повернене $ sce.trustAsResourceUrl . Повний код:

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