Ajax를 이용한 json 송 수신

1. javascript에서 json객체 만드는 방법

 

 - 객체에 property추가

        var obj = new Object();

        obj.id = 'id';

        obj.password = '#pw';

        obj.idStore = 'on';

 - 객체를 json으로 만듬

        var jsonData = JSON.stringify(obj);

 

 

2. 자바단에서 Json, JsonArray객체 만드는 방법(Simple JSON api사용)

 

 2.1 Json객체 새로 만들기

           JSONObject obj = new JSONObject();

        obj.put("name","PC");

           참고로 JSONObject는 map처럼 key와 value값으로 넣을 수 있다.

 

 2.2 Json형태의 string으로 부터 json객체 만들기

           JSONObject json = (JSONObject) JSONValue.parse(jsonParam);

 

 2.3 JsonArray새로 만들기

           JSONArray data = new JSONArray();

        data.add(1);

           참고로 JSONArray는 value값만 넣을 수 있다.(일종의 배열처럼)

 

  ex : (JSONArray안에 JSON객체를 넣은 예제)

        JSONArray series = new JSONArray();

       

        JSONObject obj = new JSONObject();

        obj.put("name","PC");

        JSONArray data = new JSONArray();

        data.add(1);

        obj.put("data", data);

        series.add(obj);

       

        JSONObject obj2 = new JSONObject();

        obj2.put("name","hoho");

        JSONArray data2 = new JSONArray();

        data2.add(5);

        obj2.put("data", data2);

        series.add(obj2);

       

        JSONObject obj3 = new JSONObject();

        obj3.put("name","ㅋㅋ");

        JSONArray data3 = new JSONArray();

        data3.add(10);

        obj3.put("data", data3);

        series.add(obj3);

        System.out.println(series);

 

        실행결과 : [{"name":"PC","data":[1]},{"name":"hoho","data":[5]},{"name":"ㅋㅋ","data":[10]}]

 

 

3. AJAX JSON송수신 예제

 

클라이언트 예 :

 

$(document).ready(function() {

       

        $('#login').eq(0).bind("click", function() {

               var obj = new Object();

               obj.type = 'login';

               obj.id = $('#id').val();

               obj.password = $('#pw').val();

               obj.idStore = 'on';

              

               if(obj.id == '' || obj.password == ''){

                       alert('아이디와 비밀번호를 입력하세요');

                       return;

               }

 

               var jsonData = JSON.stringify(obj);

               $.ajax({

                       type : "POST",

                       dataType : "json",

                       url : "/News/LoginManager",

                       data : {

                              json : jsonData

                       },

                       success : function(data) {

                              // data는 서버로부터 전송받은 결과(JSON)이므로 바로 사용한다

                              if (data.answer == 'success') {

                                      alert(data.name + '님 환영합니다.');

                                      var map = new MapArray();

                                      postData('/News/index.do', map);

                              } else if (data.answer == 'fail') {

                                      alert('아이디와 비번이 일치하지 않습니다.');

                              } else if (data.answer == 'error') {

                                      alert('원활한 접속이 이루어 지지 못했습니다. 관리자에게 문의하십시오.');

                              }

                       },

                       error : function(e) {

                              alert('서버 연결 도중 에러가 났습니다. 다시 시도해 주십시오.');

                       }

               });

        });

});

 

 

 

서버단 예(SimpleJSON사용) :

 

        String jsonParam = request.getParameter(JsonKeyInfo.PARAM_KEY_JSON);

       

        /**

         * request요청 파라미터로 부터 json데이터(String형태)를 가져와서 json객체로 만든다.

         */

        if(jsonParam != null){

            JSONObject json = (JSONObject) JSONValue.parse(jsonParam);

 

               /**

             * type에는 어떤 요청을 하는지에 관한 정보가 들어있다.

             */

            String type = (String)json.get(JsonKeyInfo.JSON_KEY_TYPE);

           

            response.setContentType("application/x-json charset=UTF-8");

 

            if(type.equals(JsonKeyInfo.Type.TYPE_KEY_LOGIN)){//로그인을 요구하는 경우               

               Person person = dao.getPerson(id, password);

                 /**

         * id와 password가 정확하다면 해당 회원에 관한 정보가 person에 저장된다.

                */

              

               /**

                  * json요청 응답으로 회원에 관한 일부 정보를 전송한다.

                  */

                   jp.put("answer", JsonKeyInfo.ANSWER.ANSWER_KEY_SUCCESS);

                   jp.put("id", person.getP_id());

                   jp.put("name", person.getP_name());

                  jp.put("phone", person.getP_phone());

 

 

            }

 

            response.getWriter().print(jp); //응답 json을 전송한다.(string형식으로 쏴줌)

 

        }

 

 

 

 

 

 

 

출처 : http://blog.naver.com/dakensin?Redirect=Log&logNo=178799627