jQuery.getJSON() 아주 많은것을 배울 수 있는 예제
페이지 정보
작성자
오원장
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 4,537회
작성일 12-03-01 02:16
본문
################################ test.php ######################################
<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="images">
</div>
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: "cat",
tagmode: "any",
format: "json"
},
function(data) {
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});</script>
</body>
</html>
위의 프로그램을 실행하면 호출하는 json 파일은 아래와 URL 형식과 같다.
http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?&tags=cat&tagmode=any&format=json
내용을 들여다보면 아래와 같은 형식으로 json 데이터를 불러와서 뿌려준다.
####################################### photos_public.gne #####################################
({
"title": "Recent Uploads tagged cat",
"link": "http://www.flickr.com/photos/tags/cat/",
"description": "",
"modified": "2012-02-29T17:02:58Z",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "Nice to meet you",
"link": "http://www.flickr.com/photos/elburge/6941465605/",
"media": {"m":"http://farm8.staticflickr.com/7064/6941465605_df802ce323_m.jpg"},
"date_taken": "2012-02-28T04:16:39-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/elburge/\">1725canon<\/a>",
"published": "2012-02-29T17:02:58Z",
"author": "nobody@flickr.com (1725canon)",
"author_id": "27934436@N05",
"tags": "cat 猫"
},
{
"title": "",
"link": "http://www.flickr.com/photos/greasychickenface/6941462635/",
"media": {"m":"http://farm8.staticflickr.com/7046/6941462635_6ba40abedb_m.jpg"},
"date_taken": "2012-02-29T09:01:36-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/greasychickenface/\">greasy chicken face<\/a>",
"published": "2012-02-29T17:01:36Z",
"author": "nobody@flickr.com (greasy chicken face)",
"author_id": "40685391@N00",
"tags": "pet animal cat tortie"
},
{
"title": "YOU STARTLED ME! 01-27-12",
"link": "http://www.flickr.com/photos/41606952@N07/6795354218/",
"media": {"m":"http://farm8.staticflickr.com/7045/6795354218_80e7eed11f_m.jpg"},
"date_taken": "2012-01-18T20:22:43-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/41606952@N07/\">ussiwojima<\/a>",
"published": "2012-02-29T17:04:09Z",
"author": "nobody@flickr.com (ussiwojima)",
"author_id": "41606952@N07",
"tags": "cat kitten kitty psycho"
},
<<<<<<<<<<<<<<<<< 중략 >>>>>>>>>>>>>>>>>>>>>>>
{
"title": "GOOD STRETCH 02-27-12",
"link": "http://www.flickr.com/photos/41606952@N07/6941403465/",
"media": {"m":"http://farm8.staticflickr.com/7050/6941403465_c3ccd823ec_m.jpg"},
"date_taken": "2012-02-26T17:47:09-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/41606952@N07/\">ussiwojima<\/a>",
"published": "2012-02-29T16:34:56Z",
"author": "nobody@flickr.com (ussiwojima)",
"author_id": "41606952@N07",
"tags": "cat kitten kitty psycho"
}
]
})
댓글목록
등록된 댓글이 없습니다.