20180330 form 태그를 통한 ajax 방식

개요

스프링으로 자바스크립트를 건드리는 경우가 허다하고 동기와 비동기 통신을 이용하는 경우가 필수적으로 발생한다. 그럴때마다 특정 방식으로의 구현에서는 막힌다. 

이번 글은 폼 태그를 이용하면서 ajax 를 활용할 일이 있어서 코드를 남긴다. 매번 코드를 뒤지기도 귀찮고 일정부분 외운다 하더라도 따로 기록해두는 편이 나을 것 같아서 게시글을 작성한다.

Client

(1) 아래와 같은 HTML 태그가 존재한다.

<div class="inputWrapper">
    <form id="newsAddrForm" action="#">
 
        <div class="formWrapper">
            <input type="text" id="newsAddrInput" name="newsAddrInput" placeholder="수집할 주소를 입력하세요."/>
        </div>
 
        <div class="submitWrapper">
            <input id="button" type="submit" value="수집" />
        </div>
    </form>
</div>

해당 태그는 사실 이런 그림을 띄고 있다. (CSS 가 적용된 상태이며 일부만 표시)

(2) 아래와 같은 코드를 스크립트 문에 추가한다.

• e.preventDefault(); : 폼의 이벤트를 인터셉트 하기위해 이벤트 리스너를 만들었다. submit() 메소드를 수행하고 해당 이벤트 내부에 preventDefault() 메소드를 호출하여 정상적으로 폼을 실행하지 않도록 막는다.

• $(form).serialize(); : 직렬화 시키는 메소드를 수행한다. 해당 메소드는 폼 태그 내부에 있는 폼 양식의 값들을 key/value 쌍으로 만들어준다. 
  
  예를들어 <input type="text" name="inputName" value="javascript"></input> 에 대한 태그가 form 태그 내부에 있다고 serialize() 메소드를 수행하면 아래와 같은 값이 나온다.
  
  

  <input type="text" name="inputName" value="javascript"></input>
   
  console.log($(form).serialize());
   
  // >> inputName=javascript
  // key / value 의 쌍이 '=' 의 형태로 구분되어 출력됨을 확인가능하다.

  
  

• $ajax({}); : 비동기통신 

이렇게 수행하면 해당되는 URL로 클라이언트가 요청을 보낸다. 요청보낸 URL은 아래와 같이 표시된다고 생각하자.

localhost:8181/apple

Server

@RequestMapping(value="/apple", method=RequestMethod.POST)
public String responseApple(
@RequestParam("inputName") String value, Model model){
    
    System.out.println(value);
    
    return null;
}

서버측 컨트롤러에서는 URL에 매핑되는 해당 메소드가 요청을 받고 요청 파라미터를 확인가능하다. 만약에 클라이언트의 비동기 통신 방식이 GET 이라고 한다면 method=RequestMethod.POST 를 GET 으로 변경시켜주어서 받으면 된다.

이후에 ajax 처리를 json 으로 반환할 것인지 혹은 뷰로 다시 반환할 것인지는 본인이 적절하게 이용해서 코딩을 실시하면 된다.

[ 참고링크 ]

[ How to Create an AJAX Contact Form ]