데이터 전송_(1)

일전에 JSON 관련 게시물에서 적은 적 있는데 웹 개발자라면 클라이언트에서 서버로, 또는 그 반대로 데이터를 보내는 것이 필수적입니다. 이러한 통신을 할 때 매번 다르게, 사람마다 다른 스타일로 코드를 짠다면 비효율적이기 때문에 보통 SI 프로젝트에 들어가보면 이러한 코드가 모듈화[1]되어 있습니다. 보통 클라이언트에서 서버로 보내는 데이터는 form 태그 내부에 위치하는데, 여기서는 이에 대해 정리해볼까 합니다. 여러 전송 방법이 있는 만큼 추가·수정해나갈 예정입니다(공부하는대로).

1. 기본전송
2. 쿼리스트링
3. JSON

 

*

적어놓고 보니 위 목차에서 쿼리스트링 중 POST 요청이 사실 쿼리스트링(name=jspark&age=32)으로 보내는 것이 아니라는 생각을 했다. 보낼 때 jQuery의 serializeArray 메소드를 이용해 JSON을 만들어 보냈기 때문이다. 그런데 스프링 컨트롤러에서 @RequestParam으로 어떻게 받아지지, 혼동이 왔는데 다음 글에 언급된 내용이 있다. 폼 태그의 POST 요청, 혹은 jQuery의 AJAX 요청 시 디폴트 Content-Type은 application/json이 아닌 application/x-www-form-urlencoded이기에 클라이언트에서 서버로 보내는 데이터의 형식이 달라진다고 한다. 즉, JSON으로 보내도 쿼리스트링으로 간다고 이해했다. 결과적으론 제대로 된 목차인...

 

____

기본전송

폼 태그의 기본 속성을 이용해 서버에 데이터를 전송하는 방식으로 전송 시 화면 전체가 새로고침되게 된다. 클라이언트의 소스는 다음과 같다.

<!-- Request URL: basic?name=jspark&age=32 -->
<form id="frm" action="/basic"><!-- [2] -->
    <input type="text" name="name" value="jspark" />
    <input type="text" name="age" value="32" />
    
    <button type="submit">전송</button>
</form>

 

서버 소스(스프링)는 다음과 같다.

@GetMapping("/basic")
public String submit(@RequestParam HashMap<String, Object> param) {
    System.out.println(param); // {name=jspark, age=32}

    return "main/home";
}

 

 

쿼리스트링

폼 태그의 기본 속성을 이용하여 전송할 경우 화면의 새로고침으로 인해 보통 비동기 통신을 이용하곤 한다. 먼저 GET 방식을 살펴보자.

 

<!-- Request URL: queryStringGet?name=jspark&age=32 -->
<form id="frmAjax">
    <input type="text" name="name" value="jspark" />
    <input type="text" name="age" value="32" />
    
    <input type="button" id="btn" value="전송" />
</form>

// jQuery를 사용한다.
$("#btn").unbind('click') // [3]
         .bind('click', function() {
             var data = {};
             $("#frmAjax").serializeArray() // [4][5]
                          .map(function(x) {
                              data[x.name] = x.value;
                          });
             $.ajax({
                 url: 'queryStringGet',
                 data: data,
                 // 이하 생략
             });
         });

@GetMapping("/queryStringGet")
public String ajaxQueryStringGet(@RequestParam HashMap<String, Object> param) {
    System.out.println(param); // {name=jspark, age=32}

    return "main/home";
}

 

다음은 POST 전송이다.

 

<!-- Request URL: queryStringPost -->
<form id="frmAjax">
    <input type="text" name="name" value="jspark" />
    <input type="text" name="age" value="32" />
    
    <input type="button" id="btn" value="전송" />
</form>

// jQuery를 사용한다.
$("#btn").unbind('click')
         .bind('click', function() {
             var data = {};
             $("#frmAjax").serializeArray()
                          .map(function(x) {
                              data[x.name] = x.value;
                          });
             $.ajax({
                 url: 'queryStringPost',
                 data: data,
                 type: 'POST',
                 // 이하 생략
             });
         });

@PostMapping("/queryStringPost")
public String ajaxQueryStringPost(@RequestParam HashMap<String, Object> param) {
    System.out.println(param); // {name=jspark, age=32}

    return "main/home";
}

 

 

JSON

추후 추가

 

____
1. 클라이언트에서 서버로 보내는 부분은 common.js, 서버에서 클라이언트로 리턴하는 형식은 ResponseUtil.java 등으로 명명할 수 있다.

2. What is the default form HTTP method?

3. jQuery 클릭 이벤트 중복 방지에 대해 다음 게시물(출처: 6Developer님 블로그)에 잘 정리되어 있다.

4. 특정 폼 내부 데이터를 JSON 형식으로 리턴하는 방식으로 중복 제거를 위해 모듈화해서 사용할 수 있다(참고: How to convert jQuery.serialize() data to JSON object?).

function getJsonFromFormData(frmNm) {
    var jsonObj = {};
    $("#" + frmNm).serializeArray()
                  .map(function(elem) {
                      jsonObj[elem.name] = elem.value;
                  });
    return jsonObj;
}

5. jQuery에서는 폼 데이터를 직렬화하는 두 가지 방법을 제공한다(참고: serialize와 serializeArray 개념 정리).

6.

____
참고자료

 

• Spring] POST 요청과 Content-Type의 관계
• .