[javascript] angular.js에서 JSONP $ http.jsonp () 응답 구문 분석

Program / 글쓴이

$http.jsonp()함수에 래핑 된 json을 성공적으로 반환하는 angular의 요청을 사용 하고 있습니다.

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에 액세스 / 파싱하는 방법은 무엇입니까?

답변

업데이트 : Angular 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의에서 제거 될 예정입니다. 대신 표준 then 방법을 사용하십시오. 경우 $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);
    });

이전 답변 : 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);
    });

답변

가장 중요한 것은 내가 아주 잠시 이해하지 못했다는 요청이 있다는 것입니다 해야 AngularJS와의 때문에, “콜백 = JSON_CALLBACK”을 포함하는 수정 요청 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);

답변

이것은 매우 도움이되었습니다. 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;
    });
});

그런 다음 Angular 템플릿에서 {{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 코드를 작성한 적이 없습니다)

답변

여전히 callbackparams 에 설정해야합니다 .

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

또는`$ scope.data = JSON.Stringify (data); 사용할 수 있습니다.

Angular 템플릿에서는 다음과 같이 사용할 수 있습니다.

{{data}}

답변

나를 위해 위의 솔루션은 요청 매개 변수에 “format = jsonp”를 추가 한 후에 만 ​​작동했습니다.