[javascript] angular.js에서 JSONP $ http.jsonp () 응답 구문 분석
$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 코드를 작성한 적이 없습니다)
답변
여전히 callback
params 에 설정해야합니다 .
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”를 추가 한 후에 만 작동했습니다.