웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
제이쿼리는 ajax() 함수외에도 다양한 단축메소드가 존재합니다. 이중에서도 getJSON() 메소드에 대하여 알아보고자 합니다. 참고로 ajax 단축 메소드는 이외에는 get(), post(), load()등의 메소드가 존재합니다. getJSON() 메소드는 언제 사용할까요? getJSON()은 비동기식으로 서버와 접속해 데이터를 불러올 때 사용하는 점은 같으나 JSON 타입의 데이터를 불러옵니다. 이는 ajax() 메소드의 dataType: 'json' 과 동일한 역할을 수행합니다.
일단 아래에서는 getJSON() 메소드의 간단한 사용 모습을 알아보자.
getJSON(url, data[Option], callback function)
위에서 보는 바와 같이 ajax()의 축약 형태는 대부분 위와 같은 방식으로 사용된다. 위에서 data는 옵션값으로 선택이 가능하며 전달할 쿼리스트링 값을 의미한다. 그렇다면 아래에서는 getJSON()을 실제로 사용한 예제를 알아보도록 하자.
/* test.json 파일 */
위 예제를 설명하면 아래와 같다.
1. getJSON() 메소드를 사용하여 test.json 파일을 읽어와 콜백함수로 전달
2. 전달된 콜백함수의 값들을 미리 선언한 배열 words에 배열값으로 각각 추가 // each() 반복문을 사용
3. 배열 값을 join()을 통해 모두 합친 후 body 태그에 삽입
위 과정을 통해 정상적으로 비동기 방식으로 json 파일을 불러다. 참고로 아래에 위에 사용된 each() 메소드는 배열 또는 객체가 가진 값을 사용해 반복문을 만들어 주는 제이쿼리 메소드로 가져온 json값을 배열에 넣기 위하여 사용되었으며 each()는 for() 반복문으로 바꾸어 수행할 수 있으나 배열 및 객체 등의 값을 사용할 경우 each()를 사용하면 매우 편리하다.
$.ajax({dataType: 'json', ... }) // 왼쪽의 축약형 getSON() 메소드
일단 아래에서는 getJSON() 메소드의 간단한 사용 모습을 알아보자.
getJSON(url, data[Option], callback function)
위에서 보는 바와 같이 ajax()의 축약 형태는 대부분 위와 같은 방식으로 사용된다. 위에서 data는 옵션값으로 선택이 가능하며 전달할 쿼리스트링 값을 의미한다. 그렇다면 아래에서는 getJSON()을 실제로 사용한 예제를 알아보도록 하자.
! getJSON() 예제소스 코드보기
$.getJSON("test.json", function (data) {
var words = []; // 받아올 데이터를 저장할 words 배열 선언
$.each(data, function (key, value) {
words.push(value);
});
var wordsStr = words.join();
$('body').html(wordsStr);
}
var wordsStr = words.join();
}
/* test.json 파일 */
{
'name': 'who',
'job': 'soldier',
'age': '28';
}
'name': 'who',
'job': 'soldier',
'age': '28';
}
위 예제를 설명하면 아래와 같다.
1. getJSON() 메소드를 사용하여 test.json 파일을 읽어와 콜백함수로 전달
2. 전달된 콜백함수의 값들을 미리 선언한 배열 words에 배열값으로 각각 추가 // each() 반복문을 사용
3. 배열 값을 join()을 통해 모두 합친 후 body 태그에 삽입
위 과정을 통해 정상적으로 비동기 방식으로 json 파일을 불러다. 참고로 아래에 위에 사용된 each() 메소드는 배열 또는 객체가 가진 값을 사용해 반복문을 만들어 주는 제이쿼리 메소드로 가져온 json값을 배열에 넣기 위하여 사용되었으며 each()는 for() 반복문으로 바꾸어 수행할 수 있으나 배열 및 객체 등의 값을 사용할 경우 each()를 사용하면 매우 편리하다.
아래의 글도 찾고 계시지 않나요?
- [자바스크립트] axios를 사용하여 비동기 호출시 try catch 구문에서 404 에러의 response를 처리하는 방법
자바스크립트 Canvas 요소를 이미지로 저장 후 서버에 ajax로 저장하는 방법- [scss] 리스트 타입 선언 방법과 반복문 사용하기, @each
자바스크립트 FormData 데이터 전송 알아보기
자바스크립트 fetch API 알아보기
제이쿼리 when() 메소드 알아보기- jquery post method
자바스크립트 ajax를 사용하여 비동기 방식 파일 업로드 예제
자바스크립트 이미지핑 기술 알아보기- AngularJS에서 $http 요청 제어 및 취소하는 방법과 예제보기