ajax에서 JSON.parse(), JSON.stringify() 마스터하기

ajax에서 JSON.parse()와 JSON.stringify()을 사용해보자.

JSON.parse() 는 String 객체를 json객체로 변환 시키고

JSON.stringify() 는 json객체를 String 객체로 변환 시킨다.

위의 두 메소드알아 보기 위해 내 프로젝트에서

사용했던 부분들을 캡처 했다.

 

JSON.stringify는 ajax의 data 설정에 사용했고

parse()는 success에서 사용했다.

ajax는 jsp파일의 스크립트단 안에 만들어줬다.

먼저 param 값과 JSON.stringify(param) , JSON.parse(data)

의 데이터를 확인해보기 위해 콘솔로그를 찍어 보았다.

일단 위 param 값을 잘 모른다면 이전 포스팅을

한번 읽어보자.

이전 포스팅 : (http://rwd337.tistory.com/171)

다음, 위 콘솔로그에 찍힌 param 값을

JSON.stringify(param)으로 형변환 시킨후 ajax로 컨트롤러에

보냈다. 다음 그 컨트롤러에서 형변환된 값을

sysout으로 확인해보니 아래와 같이 변했다.

JSON.stringify() 전

JSON.stringify() 후

정상적으로 형변환이 된것을 확인할 수 있다.

다음 컨트롤러에서 param값으로 필요한 작업들을 해준뒤.

(json String 형태로 변환된 param값을 Map형태의

paramMap으로 형변환 시켜준부분 생략 이전 포스팅 참조)

ajax의 응답 값을 출력해준다. 

즉, 컨트롤러에서 정의한 위의 resultMap이 ajax의

success 로 값이 응답? 된다.

ajax의 응답값 출력은 아래 3줄로 할 수 있다.

위의 HashMapToJson으로 형변환 전의 데이터는 아래와 같다

(형변환 전)

응답값 중 HashMapToJson을 이용해 Map 형태의 데이터를

Json String 으로 형변환을 시켜준다음

 

ajax의 success 에서 콘솔로그로 값을 확인해보면

(형변환 후)

위와같이 정상적으로 형변환된 데이터를 확인 할 수있다.

 

이제 컨트롤러에서 HashMapToJson으로 값을 형변환 시킨 후,

받은 data 를 JSON.parse(data) 를 이용해 json객체로

한번 더 형변환 시켜준 후, 콘솔로그로 값이 어떻게 변했는지

확인해 본다.

마지막으로 정리를 해보면 jsp의 ajax에서 json객체로

구성된 param을 json string 형태로 형변환 후

이것을 컨트롤러로 보내줬다.

그리고 컨트롤러에서는 받은 json string 형태의 값을

map 형태로 형변환 시킨 후 필요한 작업을 했다.

다음 map 형태의 데이터를 json string 형태로

형변환 시킨다음 jsp의 ajax로 응답했다.

ajax에서는 json string 형태로 받은 값을 사용하기 위해

json객체로 다시 형변환을 해줬다.