[AJAX] jquery 를 이용한 ajax 에서 바디에 json 데이터 처리 하기

일반적으로 jquery를 사용하여 ajax를 처리하고자 하는 경우

그 파라미터를 get/post 의 파라미터로 전달된다.

이때의 컨텐츠 타입은 application/x-www-form-urlencoded 형태가 될 것이다.

JSON 을 전송하고자 하는 경우

단계층 key=value , key=value 의 식에 1레벨의 경우는 별 문제가 없다.

그러나 다계층을 가지고 있는 경우는 문제의 소지가 있다.

물론 이런 다계층의 JSON데이터를 일련의 파라미터로 변환하는 룰이 있긴 있다.

특히 jquery ajax에는 이런게 잘 고려가 되어 있다.

{"key1":"value1","key2":"value2","key3":[{"a":"a","b":"b"},{"a":"a","b":"b"},{"a":"a","b":"b"},{"a":"a","b":"b"}]}

이런 모양에 데이터를 전송하고자 하는 경우 jquery ajax 에서 다음과 같이 보내면 어찌 될까?

$.ajax({

    url: "my.jsp",

    type: "POST",

    cache:false,

    timeout : 30000, 

    dataType:"json",

    data: {"key1":"value1","key2":"value2","key3":[{"a":"a","b":"b"},{"a":"a","b":"b"},{"a":"a","b":"b"},{"a":"a","b":"b"}]},

    success: function(data) {

        alert('success');

    },

});

key1=value1&key2=value2&key3%5B0%5D%5Ba%5D=a&key3%5B0%5D%5Bb%5D=b&key3%5B1%5D%5Ba%5D=a&key3%5B1%5D%5Bb%5D=b&key3%5B2%5D%5Ba%5D=a&key3%5B2%5D%5Bb%5D=b&key3%5B3%5D%5Ba%5D=a&key3%5B3%5D%5Bb%5D=b

이런식에 포스트 데이터가 전송된다. 물론 이런식에 GET방식도 잘 전송 될 것이다.

이걸 좀 보기 좋게 늘어 놓으면 

key1=value1

key2=value2

key3[0][a]=a

key3[0][b]=b

key3[1][a]=a

key3[1][b]=b

key3[2][a]=a

key3[2][b]=b

key3[3][a]=a

key3[3][b]=b

이런식이 된다.

수신처 에서 이걸 다시 계층적으로 만들면 될 문제이나 이건 배보다 배꼽이 큰 경우라 하겠다.

그래서 JSON데이터를 그대로 서버에 전송하고자 하는 것이다.

이때 쓸 수 있는 방법은

1) 특정 POST 파라미터에 JSON 스트링 전송

2) POST 바디 자체에 JSON 스트링 전송

우리는 2번의 방법으로 전송하고자 하는 것이다.

근데 Jindo 에서는 이런 문제는 껌이다.

function getList() {

    var oAjax = new jindo.$Ajax('my.jsp', {  

        type : 'xhr',

        method : 'post',

        onload : function(res){ 

          alert("success!");

        },

        timeout : 3,  

        postBody : true

    });

    oAjax.header("Content-Type","application/json"); 

    oAjax.request({"key1":"value1","key2":"value2","key3":[{"a":"a","b":"b"},{"a":"a","b":"b"},{"a":"a","b":"b"},{"a":"a","b":"b"}]}); 

}

무슨 옵션인지 보았는가? 

"postBody : true" 

이 옵션으로 우리가 고려하고자 하는 문제는 깔삼하게 처리 되었다.

근데 jquery는?

function getList() {

    $.ajax({

        url: "my.jsp",

        type: "POST",

        cache:false,

        timeout : 30000, 

        contentType:"application/json; charset=UTF-8",

        dataType:"json",

        data: JSON.stringify({"key1":"value1","key2":"value2","key3":[{"a":"a","b":"b"},{"a":"a","b":"b"},{"a":"a","b":"b"},{"a":"a","b":"b"}]} ),

        success: function(data) {

            alert('success');

        }

    });

}

그렇다. data 에 스트링 데이터를 넘기는 거다!

JSON.stringify() 를 이용하여 JSON 데이터를 스트링으로 전환하여 전송한다.

서버에서는 request.getInputStream() 으로 읽어 들여 JSON데이터를 파싱하면 된다.

 

근데 jindo 와 jquery 간에 히한한 문제는 다른 곳에 있었다.

우리가 Accept 를 조절 하고자 할경우

즉 Accept 가 'application/json' 이 되고자 하는 경우는 신기하게도

 

jquery 는 위와 같이 dataType:"json" 하는 것만으로도 바뀐다. 그러나 jindo 의 경우는

 oAjax.header("Accept","application/json");

이렇게 Accept 를 지정해야 한다.

[출처] http://devx.tistory.com/entry/jquery-%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-ajax-%EC%97%90%EC%84%9C-%EB%B0%94%EB%94%94%EC%97%90-json-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%B2%98%EB%A6%AC-%ED%95%98%EA%B8%B0