더북(TheBook)

먼저 FormData 생성자로 formData 객체를 만듭니다. 생성된 객체의 append 메서드로 키-값 형식의 데이터를 저장할 수 있습니다. append 메서드를 여러 번 사용해서 키 하나에 여러 개의 값을 추가해도 됩니다. has 메서드는 주어진 키에 해당하는 값이 있는지 여부를 알려줍니다. get 메서드는 주어진 키에 해당하는 값 하나를 가져오고, getAll 메서드는 해당하는 모든 값을 가져옵니다. delete는 현재 키를 제거하는 메서드고, set은 현재 키를 수정하는 메서드입니다.

이제 AJAX로 폼 데이터를 서버에 보내면 됩니다.

<script>
  var xhr = new XMLHttpRequest();
  var formData = new FormData();
  formData.append('name','zerocho');
  formData.append('birth', 1994);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === xhr.DONE) {
      if (xhr.status === 200 || xhr.status === 201) {
        console.log(xhr.responseText);
      } else {
        console.error(xhr.responseText);
      }
    }
  };
  xhr.open('POST','https://www.zerocho.com/api/post/formdata');
  xhr.send(formData); // 폼 데이터 객체 전송
</script>

 

send 메서드에 데이터를 넣어 보냅니다. 현재 설정된 주소는 실제로 동작하는 주소라서 결괏값을 받을 수 있습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.