programing

해석, JSONP $http.jsonp() 응답(angular.disples).

closeapi 2023. 3. 22. 21:13
반응형

해석, JSONP $http.jsonp() 응답(angular.disples).

앵글을 쓰고 있어요.$http.jsonp()함수로 랩된 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에 액세스/파싱하는 방법

업데이트: 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에서 삭제됩니다.대신 standard then method를 사용합니다.한다면$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반환이 성공적이었으면 함수는 가지고 있는 것처럼 작동해야 합니다.

이렇게 하면 글로벌 공간을 더럽힐 필요가 없어집니다.이는 각도(Angular)에 설명되어 있습니다.JS 매뉴얼은 이쪽.

이 방법을 사용하도록 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);
    });

한동안 이해하지 못한 가장 중요한 것은 요청에 "callback=J"가 포함되어야 한다는 것입니다.SON_CALLBACK"는 각도가 있기 때문에JS는 요청 URL을 변경하여 "JSON_CALLBACK"의 고유 식별자를 대체합니다.서버 응답에서는 "JSON_CALLBACK" 하드코딩 대신 "Callback" 파라미터 값을 사용해야 합니다.

JSON_CALLBACK(json_response);  // wrong!

PHP 서버 스크립트를 직접 작성했기 때문에 원하는 함수 이름을 알고 "callback=J"를 전달할 필요가 없다고 생각했습니다.SON_CALLBACK"을 클릭합니다.큰 실수!

AngularJS는 요청의 "JSON_CALLBACK"을 고유한 함수 이름("callback=callbacks.callbacks")으로 대체합니다._0") 및 서버 응답은 다음 값을 반환해야 합니다.

angular.callbacks._0(json_response);

이것은 매우 도움이 되었습니다.앵글은 JQuery와 똑같이 작동하지 않습니다.독자적인 jsonp() 메서드가 있어 실제로 "&callback=J"가 필요합니다.SON_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/ (실행자:난 Angular를 써본 적이 없어이전 JS 코드)

아직 설정하셔야 합니다.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;
}).

또는 '$scope.data=J'를 사용할 수 있습니다.SON.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);
    });

언급URL : https://stackoverflow.com/questions/12066002/parsing-jsonp-http-jsonp-response-in-angular-js

반응형