'json jquery 예제'에 해당하는 글 2건

저번 포스팅에서는 JSON형태를 jquery를 통하여 이미지 링크를 화면에 뿌려주는 작업을 했습니다.

이번에는 구글 이미지에서 보여주는것처럼 버튼을 누를때다마 이미지를 뿌려주는 작업을 해보겠습니다.

일단 구글 이미지는 다음 화면과 같습니다.


아래의 결과 더보기를 버튼을 누르면 이미지들이 아래에 생성되는 기능입니다.(트위터나 블로그에도 많이 사용되는 기능이죠?)


사실 jquery 에서 지원하는 함수만 써준다면 간단히 해결이 됩니다.

먼저 버튼 이벤트를 위해서 기존의 소스에서 페이지 실행후 바로 실행되던 스크립트를 이벤트 형식으로 바꿔줍니다.




소스보기





이제 ImageAdd() 로 호출이 가능합니다. input 버튼도 추가해줍니다. 


<input type='button' value='이미지 추가!' onclick='ImageAdd()'>


이제 소스를 실행해서 보면 1~10까지 이미지가 똑같이 붙여지는거을 볼수 있습니다. 당연히 똑같은 그림을 볼 이유가 없지요? json에서 불러오는 파라미터값 from, to 값을 조정해 주면 됩니다.


ImageAdd()함수를 다음과 같이 수정합니다.



소스보기



params 데이터가 배열이기 때문에 접근은 params.from, params.to 이렇게 접근이 가능합니다.

이제 소스를 실행해서 보면 새로운 이미지들이 붙지만 기존의 이미지가 뒤로 밀려서 앞쪽에 붙게 됩니다.

jquery after()는 현재 #twiImage 뒤에 생성되기 때문에 기존에 있던 이미지들이 뒤로 밀려보이게 됩니다.

우리가 할일은 기존의 이미지는 뒤로 밀리지 않고 맨 뒤쪽에 새로운 이미지들이 추가되게 하는겁니다.

그러기 위해서 jquery find() , eq()함수를 사용합니다.


jquery find() 레퍼런스 :  http://api.jquery.com/find/

jquery eq() 레퍼런스 : http://api.jquery.com/eq/


find()함수로 해당 태그를 찾은뒤 eq()로 가장 마지막 태그를 찾을수가 있습니다.

기존의 imageInsert()함수를 다음과 같이 수정합니다.



소스보기




#twiImage에서 a 태그를 찾습니다.  ->  $('#twiImage').find("a")

찾은 태그들중에서 가장 마지막 a태그를 찾습니다. ->  $('#twiImage').find("a").eq(-1)

그 뒤에 해당 태그를 넣어줍니다. -> $('#twiImage').find("a").eq(-1).after('...')


간단하지요? 완성된 소스 입니다.



소스보기






이미지가 쭉쭉쭉 늘어납니다. (썸네일인데도 용량이 상당한지 로딩이 느리네요;ㅋ)

이미지 대신에 글로 활용도 가능합니다. (트위터 글이나 블로그  더보기 하면 아래로 쭈욱쭈욱 늘어나는게 이거랑 비슷합니다.) 


이상끝!

- 근데 뭘 만들다가 내가 이걸하고 있는지 잊어버림..

-  소스 수정함. 빈태그<a></a> 사용으로 인한 웹표준 에러... div로 바꿈.


WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

JSON(JavaScript Object Notation)의 약자

 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이.

 DATA 교환언어.


참고 JSON 개요 : http://www.json.org/json-ko.html


XML도 많이 사용하지만 요즘엔 JSON도 많이 지원을 해준다.(왠만한 api 및 데이터교환은 XML or json 방식으로 해주는듯하다. )

openAPI를 사용하는 도중에 xml방식보다는 JSON방식으로 사용하는편이 너무 쉬워서 예제를 올려본다.


 www.followkr.com 에서 지원해 주는 API로 만들었습니다.

아래의 예제는 http://www.followkr.com/common/html/api.html 에 있는 sample code를 변형하여 작성하였습니다.


<script type="text/javascript">

   var jsonimage = "http://www.followkr.com/rank/image.php?callback=?";

var params = {

from: 1,

to: 10

};

    $.getJSON(jsonurl, params, function(data, status) {

        if(data.rankedTwitList){

            // success

        }

    });

</script>


jQuery  에서는 getJSON()함수를 통하여 json방식을 손쉽게 가져올수 있습니다.

ex) http://api.jquery.com/jQuery.getJSON/


위의 코드를 보시면 getJSON()의 파라미터값만 잘보시면 됩니다.

jsonurl 은 가져올 json 페이지.

params 는 url 뒤에 붙을 get방식의 파라미터 들을 뜻합니다.

만일 파라미터가 없다면 '' ( $.getJSON(jsonurl, '', function(data, status) ) 이렇게 하시면 됩니다.

마지막 파라미터는 json의 연결이 성공했을때 받아오는 데이터 값입니다.

성공적으로 연결이 되었다면 모든 값들은 data 변수에 들어가게 됩니다.




이제 우리가 할일은 주석처리된 success 부분에 data를 가져와서 뿌려주기만 하면됩니다.

먼저 data에 어떤 형식으로 값이 들어왔는지 알아봐야 합니다.

 http://www.followkr.com/rank/realtime.php 로 들어가보면 배열 형식으로 데이터가 쭈욱~ 나열된것을 볼수 있습니다. (아래 그림과 같이 데이터가 data로 들어가게 되는것입니다.)



여기서 알아두셔야 될것은 []은 배열. {}은 key, value로 이루어진 데이터 형식이라는것입니다.

(자세한 형식은  http://www.json.org/json-ko.html 를 읽어 보시기 바랍니다.)


그러므로 [0], [1], [2] .. 형식으로 데이터들이 묶여 있으며, [0].id, [0].body, [0].wener 등으로 데이터에 접근이 가능합니다. 또한 [0].links[0].url , [0].links[0].type 같이 value값이 배열형식으로 되어 있을수 있습니다.

이 형식을 익숙한  XML형태로 나타내면 다음과 같습니다.



rankedTwitlist[0],rankedTwitlist[1],rankedTwitlist[2].... 쭈욱~ 데이터가 있는것이다. 

단지 그것들을 한줄에 써서 보내주는것이 json 방식인것.

데이터 접근 방식만 알았다면 간단하게 데이터를 뿌려줄수 있다.

해당 소스는 아래와 같다.




소스보기





jquery 의 after()를 통하여 가져온 이미지를 페이지에 붙여주는 방식으로 처리해보았다.

필요한 데이터는 

이미지 경로(data.rankedTwitList[i].links.image[0].thumbnailUrl)

 원본 url (data.rankedTwitList[i].links.image[0].url) 로 접근하였다.

- 여기에서 i는 for 문으로 돌리기 위하여 선언된 변수이다.


해당 화면의 소스 결과는 다음과 같다.




해당사진 10개를 불어들여와서 이미지를 뿌려주고, 이미지를 클릭하면 원본 페이지로 <a>태그로 생성하였다.

JSON은 그렇게 어렵지가 않다. 원리만 안다면 상당히 유용하게 쓰일 형식!!

이로써 간단하게 json jquery 예제를 살펴 보았습니다~


관련글


1. JSON은 무엇일까? (JSON + jquery 예제) 


2. JSON을 응용해보자. (JSON + jquery 예제2)



- 덧1 : naver openAPI는 JSON방식을 지원해 주지 않습니다.(이걸 몰라서 하루를 날렸습니다.)

- 덧2 : 처음에 다음 API를 사용하려 했으나 apikey값을 받기 위해선 도메인이 필요하더라..그래서 포기.

- 덧3 : 개인적으로 XML보다 파싱이 훨씬 쉬워서 좋다.




WRITTEN BY
No.190
세계정복의 시작점

트랙백이 하나이고 , 댓글  5개가 달렸습니다.
  1. ㅜㅡㅜ 미천한 글귀를 참고하시다니! 감사합니다!
  2. 비밀댓글입니다
  3. 혹시나 해서 해당 경로로 들어가서 봤었습니다만..
    json 지원하는 라이블러리가 설치가 않되신거 아닌가요? getjson이 작동하지 않는것으로 봐서는 소스상에서는 문제가 없어 보입니다만 서버구축쪽을 보셔야 할거 같습니다.
  4. 오뎅과국물 2012.11.11 22:33 신고
    학교에서 하이브리드앱 관련해서 플젝중인데 많은 도움이 되었습니다. 감사합니다.
  5. 프로젝트 하시는데 제가 도움을 드렸군요! ㅎㅎ
    댓글 감사합니다.
secret