[자바스크립트] serialize 한 json 객체의 내용 보기

Ajax를 이용해 화면단에서 서버단으로 데이터를 송신할 때 {키:값} 의 형태인 json 자료 형으로 데이터를 보내게 됩니다.  

new Ajax.Request(URL, 

                        {

                          name: '홍길동',

                          age : '20',

                          onSuccess: function(transport){}

                         )

대략 이런 형태입니다. 

한두개의 필드를 넘길때는 문제가 없지만 넘겨야 하는 필드가 수십개인 경우에는 코드생성뿐만 아니라 유지보수도 상당히 힘들겁니다. 

폼에 있는 데이터를 한꺼번에 보내고 싶을 때 사용하는 함수가 serialize() 함수 입니다. 

id가 'frm'인 폼이 있을 때, 키와 값을 하나씩 매핑해 주는것이 아니라 

var jData = $("frm").serialize();

이렇게 해주고 넘길때 아래와 같이 처리하면 됩니다. 

new Ajax.Request(URL, 

                        {

                          pram : jData,

                          onSuccess: function(transport){}

                         )

오늘 작업을 하다가 폼 자료중에 넘어가지 않은 데이터가 있어서 jData의 내용을 확인해봐야하는 상황이 생겼습니다. 맨날 복붙만 하다보니 실제 어떤식으로 데이터가 전송되는지는 제대로 확인하지도 않고 사용했었습니다. 

화면단에서 데이터 내용출력해 보는데 alert만한게 있겠습니까? 먼저 alert(jData)를 실행해봅니다. 

역시 출력이 되지 않습니다. 객체를 출력하기 위해서는 Object.toJSON() 함수를 사용해야 합니다. alert(Object.toJSON(jData)) 를 수행하면 아래와 같이 출력내용을 볼 수 있습니다.  

serialize()를 수행할때 인자를 어떻게 주었는지에 따라서 데이타의 모양이 약간 다르게 나타납니다. 인자가 없이 serialize() 라고 수행하거나, serialize(false)라고 수행하면 위와 같이 나오고 serialize(true)라고 수행하면 아래와 같은 내용을 볼 수 있습니다. 

데이터 표시 형식을 json 형으로 할것인가 아니면 파라미터 방식으로 할것인가의 차이인것 같습니다. 

별 내용도 아닌데 두시간을 끙끙댔네요. 다시 이 문제에 시간을 낭비하지 않기 위해서 블로그를 작성합니다. ㅋㅋ