[javascript] 입력 폼에서 서버와의 통신 처리하기

11 Dec 2023

javascript

웹 애플리케이션을 개발할 때 입력 폼에서 사용자가 제출한 데이터를 서버로 전송하고, 서버에서의 응답을 받아서 처리하는 것은 매우 일반적인 작업입니다. 이를 수행하기 위해서는 AJAX (Asynchronous JavaScript and XML)나 fetch API를 사용하여 서버와의 통신을 해야 합니다.

AJAX를 사용한 서버 통신

AJAX는 웹 페이지가 새로 고침되지 않고도 서버와 데이터를 교환할 수 있는 기술입니다. 아래는 AJAX를 사용하여 입력 폼의 데이터를 서버로 전송하고, 결과를 처리하는 간단한 예제입니다.

function sendDataToServer() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      // 서버로부터의 응답을 처리
      console.log(this.responseText);
    }
  };
  xhttp.open("POST", "server-url", true);
  xhttp.setRequestHeader("Content-type", "application/json");
  var data = {
    // 입력 폼의 데이터
  };
  xhttp.send(JSON.stringify(data));
}

위의 코드에서 sendDataToServer 함수는 입력 폼의 데이터를 서버로 전송하는 역할을 합니다. 이 함수는 원하는 이벤트 발생 시 호출될 수 있도록 설정해야 합니다.

fetch API를 사용한 서버 통신

fetch API는 AJAX의 대안으로 사용할 수 있는 기술입니다. 아래는 fetch API를 사용하여 서버로 데이터를 보내고, 응답을 처리하는 예제입니다.

function sendDataToServer() {
  var data = {
    // 입력 폼의 데이터
  };
  fetch('server-url', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(data => {
    // 서버로부터의 응답을 처리
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
}

위의 코드에서 sendDataToServer 함수는 입력 폼의 데이터를 서버로 전송하고, 서버로부터의 응답을 처리합니다. 이 때 fetch 함수는 Promise를 반환하므로, 응답을 처리하기 위한 then과 오류를 처리하기 위한 catch를 사용하여야 합니다.

이와 같이, 입력 폼에서 서버와의 통신을 위한 처리는 AJAX나 fetch API를 사용하여 쉽게 구현할 수 있습니다.