JavaScript에서 폼 전송 방법

폼은 두 가지 방식으로 전송될 수 있습니다: GET 방식 또는 POST 방식. 폼 전송 방식은 폼의 method 속성으로 조절됩니다.

예를 들어, 폼에 GET 전송 방식을 지정해 보겠습니다:

public/form.html<form action="/handler/" method="GET">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

이번에는 POST 방식입니다:

public/form.html<form action="/handler/" method="POST">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

이제 두 전송 방식의 차이점을 살펴보겠습니다. GET 방식을 사용할 경우, 폼 데이터는 브라우저에서 소위 매개변수 문자열 (query string) 형태로 보이게 되며, 이는 키-값 쌍 형태로, 여기서 키는 폼 요소의 이름이고, 값은 해당 요소에 입력된 데이터입니다. 이때 값 쌍은 앰퍼샌드(&)로 구분됩니다.

GET 방식으로 전송된 데이터는 우리 서버에서 데이터 객체의 get 속성에 들어갑니다:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.get); // 서버 콘솔에 출력됨
    return '폼 데이터 수신됨';
  }
}

그리고 POST 방식으로 전송된 데이터는 우리 서버에서 데이터 객체의 post 속성에 들어갑니다:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.post); // 서버 콘솔에 출력됨
    return '폼 데이터 수신됨';
  }
}

간략하게 하기 위해 데이터를 별도의 변수로 얻기 위해 비구조화 할당을 사용할 수 있습니다:

server.jsexport default {
  '/handler/': function({get, post}) {
    console.log(get);
    console.log(post);
    return '폼 데이터 수신됨';
  }
}