출처: https://folio4jyang.tistory.com/45 [개발쟝 폴리오]
ajax parsererror jsonp 해결
JSON데이터를 가져오기 위해 ajax 로 크로스도메인인 url 호출을 시도했다. try-catch 문안에 ajax 를 넣어서 실행하고 데이터 가져오기 성공하면 console.log(data); 로 데이터 잘 가져오는지 뿌리는 것부
folio4jyang.tistory.com
JSON데이터를 가져오기 위해 ajax 로 크로스도메인인 url 호출을 시도했다.
try-catch 문안에 ajax 를 넣어서 실행하고 데이터 가져오기 성공하면
console.log(data); 로 데이터 잘 가져오는지 뿌리는 것부터 테스트를 하는데
콘솔창에 아무것도 안 뜨는 것... ㅇ-ㅇ
문제적 자바스크립트_
function getData() {
try {
var _url = 크로스 도메인인 url;
$.ajax({
url: _url
, type: 'GET'
, async: true
, dataType: 'jsonp'
, success: function(data) {
console.log(data);
}
, error: function(status, error) {
console.log(error);
}
});
}
catch (e) { console.log(e); }
}
이대로 실행하니 ajax 의 error 부분에서 parsererror
dataType: 'jsonp' 뒤에 ,jsonp: 'callback' 도 붙여보았지만 노소용이었다...
jsonp 속성을 주는게 무슨 의미인지도 모르고 예제가 callback 으로 적혀있길래 그대로 따라한건데
혹시나 했지만 역시나 안됨...
해결!
jsonp 속성으로 주었던 callback 은 호출하는 json 데이터에 들어있어야 한다.
다시말하면,
callback({"name" : "sim"}); 이런 식으로...
함수명은 callback 이 아니라 view 뭐 이런식으로 정해줘도 되는 것!
1. 뿌려주는 JSON 데이터에 콜백함수명을 추가함 (view)
2. jsonp 속성 추가 ( , jsonp: 'view' )
function getData() {
try {
var _url = 크로스 도메인인 url;
$.ajax({
url: _url
, type: 'GET'
, async: true
, dataType: 'jsonp'
, jsonp: 'view'
, success: function(data) {
console.log(data);
//data 가공할 내용은 이곳에~~
}
, error: function(status, error) {
console.log(error);
}
});
}
catch (e) { console.log(e); }
}
*하나의 함수로 데이터 호출 & 가공을 할 수도 있고 간단하게 분리를 할 수도 있다.
다른버전!
function getData() {
try {
var _url = JSON 데이터가 있는 크로스 도메인 url;
$.getStript(_url);
}
catch(e) { console.log(e); }
}
function view() {
try {
var data = arguments.length > 0 ? arguments[0] : null;
if (data == null) return; //데이터가 없으면 반환
console.log(data); //JSON 데이터 맞게 들어왔는지 확인
}
catch(e) {}
}