해석, 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
'programing' 카테고리의 다른 글
MongoDB는 여러 컬렉션을 동시에 쿼리합니다. (0) | 2023.03.22 |
---|---|
Angular에서 재귀 템플릿을 만드는 방법중첩된 개체를 사용할 때 JS를 선택하십시오. (0) | 2023.03.22 |
Mongoose/MongoDB의 비밀번호 필드를 보호하여 컬렉션을 채울 때 쿼리로 반환되지 않도록 하려면 어떻게 해야 합니까? (0) | 2023.03.22 |
리액트 라우터를 사용한 루트 변경 검출 (0) | 2023.03.22 |
WordPress의 한 페이지에만 커스텀 css/js를 추가하는 방법 (0) | 2023.03.22 |