자바스크립트 폼 데이터 전송

10 Sep 2023

javascript

폼(form)은 웹 페이지에서 사용자로부터 입력을 받는데 사용되는 요소입니다. 사용자가 폼을 작성하고 제출(submit)하면, 폼 데이터는 서버로 전송되어 처리됩니다. 자바스크립트를 사용하여 이러한 폼 데이터를 전송하는 방법에 대해 알아보겠습니다.

1. 폼 데이터 얻기

폼 데이터를 전송하기 전에, 먼저 사용자가 입력한 데이터를 얻어와야 합니다. 이를위해 JavaScript의 formData 객체를 사용할 수 있습니다.

const form = document.getElementById('myForm');
const formData = new FormData(form);

// 특정 필드값 얻기
const name = formData.get('name');
const email = formData.get('email');

위의 예제에서 myForm은 HTML에서 폼 요소의 id입니다. get() 메서드를 사용하여 특정 필드의 값에 접근할 수 있습니다.

2. 서버로 폼 데이터 전송

폼 데이터를 얻은 후에는 이를 서버로 전송해야합니다. 이를 위해 자바스크립트의 fetch() 메서드를 사용할 수 있습니다.

const form = document.getElementById('myForm');
const formData = new FormData(form);

fetch('http://example.com/submit', {
  method: 'POST',
  body: formData,
})
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error(error);
});

위의 예제에서 fetch() 메서드를 사용하여 http://example.com/submit URL에 POST 요청을 보내고 있습니다. body 옵션에 폼 데이터를 전달하여 전송합니다. 이후에는 응답을 처리하는 코드를 작성할 수 있습니다.

3. 폼 데이터 유효성 검사

폼 데이터가 전송되기 전에 유효성을 검사할 수도 있습니다. 이를 위해 JavaScript의 form 객체의 checkValidity() 메서드를 사용합니다.

const form = document.getElementById('myForm');

if (form.checkValidity()) {
  // 유효한 데이터인 경우 폼 데이터 전송
  const formData = new FormData(form);

  fetch('http://example.com/submit', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });
} else {
  // 유효하지 않은 데이터인 경우 에러 처리
  console.error('폼 데이터가 유효하지 않습니다.');
}

위의 예제에서 checkValidity() 메서드를 호출하여 폼 데이터의 유효성을 검사합니다. 유효하지 않은 데이터인 경우 에러 처리를 할 수 있습니다.

자바스크립트를 사용하여 폼 데이터를 전송하는 방법에 대해 알아보았습니다. 이를 활용하여 웹 애플리케이션에서 유용한 폼 처리 기능을 구현할 수 있습니다.