Разбор JSONP $http.jsonp() в angular.js

Ответ 1

UPDATE: поскольку Angular 1.6

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

Теперь вы должны определить обратный вызов следующим образом:

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

Изменить/получить/объявить параметр через $http.defaults.jsonpCallbackParam, по умолчанию - callback

Примечание. Вы также должны убедиться, что ваш URL-адрес добавлен в доверенный/белый список:

$sceDelegateProvider.resourceUrlWhitelist

или явно доверяют через:

$sce.trustAsResourceUrl(url)

Использование:

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

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

Предыдущий ответ: Angular 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 здесь.

Обновлен скрипт Matt Ball, чтобы использовать этот метод: 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);
    });

Ответ 2

САМОЕ ВАЖНОЕ ВЕЩАНИЕ Я не понимал, что в запросе ДОЛЖЕН содержится "callback = JSON_CALLBACK", потому что AngularJS изменяет URL-адрес запроса, заменяя уникальный идентификатор для "JSON_CALLBACK" . Ответ сервера должен использовать значение параметра "обратный вызов" вместо жесткого кодирования "JSON_CALLBACK" :

JSON_CALLBACK(json_response);  // wrong!

Поскольку я писал свой собственный PHP-сервер script, я думал, что знаю, какое имя функции ему нужно, и не нужно было передавать "callback = JSON_CALLBACK" в запросе. Большая ошибка!

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

angular.callbacks._0(json_response);

Ответ 3

Это было очень полезно. Angular не работает точно так же, как 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}} в своем шаблоне Angular.

Ответ 4

Это должно работать отлично для вас, если функция 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 раньше)

Ответ 5

Вам еще нужно установить callback в параметрах:

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

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

Где 'functionName' - строковая ссылка на глобально определенную функцию. Вы можете определить его за пределами angular script, а затем переопределить его в своем модуле.

Ответ 6

Для синтаксического анализа сделайте это -

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

Или вы можете использовать     `$ Scope.data = JSON.stringify(данные);

В шаблоне Angular вы можете использовать его как

{{data}}

Ответ 7

для меня вышеупомянутые решения работали только один раз, когда я добавил "format = jsonp" в параметры запроса.

Ответ 8

Я использую angular 1.6.4, а ответ, предоставленный subhaze, не работает для меня. Я немного изменил его, а затем он сработал - вам нужно использовать значение, возвращаемое $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);
    });