JavaScript에서 폼 전송

이제 브라우저에서 폼 요소를 처리하며 JavaScript로 작업하는 방법을 이미 알고 있을 것입니다. 그러나 PHP나 NodeJS로 작성된 사이트의 서버 측에서 처리하기 위해 폼을 서버로 전송할 수도 있습니다.

이것은 서버에 저장된 사이트 데이터를 추가하고 변경하기 위해 필요합니다.

어떻게 수행되는지 살펴봅시다. 몇 개의 입력 필드와 버튼이 있다고 가정해 봅시다:

<input>
<input>
<input type="submit">

우리 요소를 form 태그로 감싸겠습니다. 이 경우 버튼을 클릭하면 서버로 전송될 폼이 만들어집니다:

<form>
	<input>
	<input>
	<input type="submit">
</form>

서버에서 폼 데이터를 받을 수 있도록 각 입력 필드에 고유한 이름을 지정해야 합니다:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

이 경우 서버로 전송되는 폼 데이터는 키-값 쌍 형태로 전달되며, 여기서 키는 폼 요소의 이름이고 값은 입력된 데이터입니다.

폼을 전송하기 위해 서버가 반드시 필요한 것은 아닙니다. 제공된 폼 코드를 아무 파일에 복사하고 브라우저에서 실행한 후 전송 버튼을 누르면 폼이 전송되고 브라우저 페이지가 새로고침됩니다.

그러나 서버가 없으면 폼 데이터는 어디에도 도달하지 않습니다. 따라서 서버와 함께 폼 작동을 확인해 봅시다. 아직 서버 측 언어를 모르기 때문에 학습용 HTTP 서버를 사용하여 폼 전송을 연습해 보겠습니다.

우리 폼을 http://localhost:3001/form.html 주소로 접근 가능하도록 파일에 배치해 봅시다:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

폼에 전송 주소를 지정하는 action 속성을 추가하겠습니다:

<form action="/handler/">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

이제 server.js 파일에 폼 전송 주소에 대한 핸들러를 작성하겠습니다:

export default {
	'/handler/': function() {
		return 'form data received';
	}
}

우리 핸들러의 매개변수로 전송된 폼 데이터가 전달됩니다:

export default {
	'/handler/': function(data) {
		console.log(data); // 서버 콘솔에 출력됨
		return 'form data received';
	}
}

폼과 이를 처리할 파일을 생성하세요. 폼을 전송하고 데이터가 실제로 서버에 도착했는지 확인하세요.