본문 바로가기
WEB기초/JQuery

[jquery] Ajax 이용하기 02 - JSON

by 별토끼. 2017. 4. 24.
반응형



 Ajax 이용하기 02 - JSON


  • JSON(제이슨, JavaScript Object Notation)
경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JavaScript Programming LanguageStandard ECMA-262 3rd Edition - December 1999의 일부에 토대를 두고 있다.

- 형태 

{

  "num":1,

  "name":"박찬형",

  "addr":"상봉동",

  "gender":"남자"

}

- 데이터 교환 형식은 이 외에도 xml 등이 있다.

- json data type에서 key값은 반드시 " "로 감싸야 한다.

- json data type

1. number : 10, 10.1 

2. string : "abcd", "ABCD"

3. boolean : { "key" : XXX }

4. array : [ value1, value2, value3 ]

EX > { "num" : 1,

   "name" : "kim",

   "isMan" : "true" ,

   "hobby" : [  ]

  }


  • JSON parse를 이용한 예제

- 서버에서 보낸 data는 json 형식의 string이다. 이는 jquery를 통해 변환되어 전달된다

- json 형식의 string은 JSON.parse( )를 이용해 javascript 객체로 바꿀 수 있다.


*html


* server


** 출력 결과 **



  • json문서 정식으로 응답하기
- res.json을 이용한다.

- {num:1,name:"kimgura",isMan:true} 형태를 json방식으로 변환한 후 다시 jquery가 변환하고 응답한다.

*html


*server


** 출력 결과 **

 


  • JSON 형태로 받은 데이터 이용하기
- 전달받은 데이터는 obj.xx 형태로 이용할 수 있다.

*html


* server


** 출력 결과 **

 


  • 더미데이터로 '더보기' 만들기
*html


* server


** 출력 결과 **

 




반응형

'WEB기초 > JQuery' 카테고리의 다른 글

[jquery] Ajax 이용하기 04  (0) 2017.04.26
[jquery] Ajax 이용하기 03  (0) 2017.04.25
[jquery] Ajax 이용하기 01  (0) 2017.04.21
[jquery] jQuery Plugin 이용하기2 (170404)  (0) 2017.04.04
[jquery] jQuery Plugin 이용하기 (170403)  (0) 2017.04.03

댓글