본문 바로가기

Local Oriented/jQuery

jquery 로 json 을 사용하는 방법 2가지, $.ajax 와 $.get



-  $.ajax 사용 
http://najsulman.tistory.com/598
http://findfun.tistory.com/382 관련내용 
 
- $.get 사용
http://blog.daum.net/badog/4458118 
http://whitememo.tistory.com/163


- json 타입의 데이타. { 와 } 는 Json 데이타 임을 명시, [ 와 ] 는 배열임을 명시.

{"keyA":"valueA", "keyB":"valueB"} 2 개의 데이타. .ajax 의 success 에 json 으로 정의된 경우, json.keyA 는 valueA 가 된다.

[{"keyA":"valueA"}, {"keyA":"valueB"}] 1 개의 데이타로 구성된 배열. $(json).each(function(){ this.keyA 는 valueA }


- 아래 데이타를 뽑아 쓰려면..

{"root":

  {"sub":[

    {"keyA":"valueA1", "keyB":"valueB1", ...},

    {"keyA":"valueA2", "keyB":"valueB2", ...},

    ...

  ]}

}

var ja1 = json.root.sub; // ja 는 Json Array 를 줄여서 사용했구요.. json 은 .ajax 에서 success function 에 사용된 파라미터명

$(ja1).each(function(){ // 배열을 $ 로 묶어서 DOM 구조화 한 다음 처리

  // this.keyA, this.keyB, ...

}



- jsonp 관련 읽을 꺼리..
  http://coding.smashingmagazine.com/2012/02/09/beginners-guide-jquery-based-json-api-clients/
  연결된 내용이 제법 있음.

- jsonp 는 다른 크로스 도메인간 데이타 교환에 사용

정보를 제공하는 측은.. UTF-8 대신에 EUC-KR 을 사용해도 됩니당.

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%

  String callback  = request.getParameter("callback"); // null 을 체크해 주면 더 좋고..

%>

<%= callback %>({

  "company":{

    "member":[

      {"keyA":"valA1", "keyB":"valB1", "keyC":"valC1"},

      {"keyA":"valA2", "keyB":"valB2", "keyC":"valC2"},

      ...

    ]

  }

});

정보를 사용하는 측은 .ajax 의 dataType 을 'jsonp' 로 사용.
.ajax 사용 법은 [모음글] jQuery ajax 참조.