WEBAPI

WEBAPI

Editing
  • account_tree
  • bug_report

InterfaceFormData

<form> 요소 내 입력 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공한다.

하위 트리 탐색

  • Constructor

    새로운 FormData 인스턴스를 생성한다.
    • FormData()

      새로운 FormData 인스턴스를 생성하는 생성자 함수이며 실제 웹 문서내 폼 요소를 인수로 지정할 수 있다.
  • [[Prototype]]

    • Methods

      • append()

        기존 필드 키에 새 값을 추가하거나 키가 없다면 추가한다.
      • delete()

        키와 그 값을 제거한다.
      • entries()

        객체에 포함된 모든 key/value 쌍을 허용하는 반복가능한 iterator 객체를 반환한다.
      • get()

        지정된 키와 연관된 첫 번째 값을 반환한다. 값이 여러개인 경우 모든 값을 원한다면 getAll() 메소드를 이용한다.
      • getAll()

        지정된 키와 연관된 모든 값을 반환한다.
      • has()

        지정된 특정 키가 존재하는지를 boolean으로 반환한다.
      • keys()

        객체의 모든 키를 갖는 iterator 객체를 반환한다.
      • set()

        기존 키에 새로운 값을 설정하거나 존재하지 않을 경우 key/value 값을 추가한다.
      • values()

         객체에 포함된 모든 value를 갖는 iterator 객체를 반환한다.

상속 계층 탐색

Object

  • Methods

    • hasOwnProperty()

      객체가 특정 프로퍼티를 가지고 있는지를 블린 값으로 반환한다.
    • isPrototypeOf()

      해당 객체가 다른 객체의 프로토타입 체인에 속한 객체인지를 체크한다. 이 메소드는 instanceof 연산자와 함께 특정 프로토타입으로부터 상속된 객체만 작동하게 하려는(예를 들어 특정 메소드나 속성이 객체에 있다는걸 보장하려는 때) 코드에서 특히 쓸모가 많다.
    • propertyIsEnumerable()

      매개 변수의 속성이 열거가능한지 여부를 체크한다.
    • toLocaleString()

      객체를 나타내는 문자열을 사용 지역의 방식으로 출력이 된다. 이 메소드는 상속받은 모든 객체가 사용할 수 없고 아래와 같은 상속된 객체에 사용이 된다. Array.prototype.toLocaleString() Number.prototype.toLocaleString() Date.prototype.toLocaleString()
    • toString()

      객체를 나타내는 문자열을 반환한다.
    • valueOf()

      객체의 Primitive(원시) 값을 반환한다.
  • Properties

    • constructor

      객체의 생성자 함수를 참조한다.
    • __proto__

      상속된 [[Prototype]] 참조하거나 설정가능하며 일반적으로 실제 코드상에서는 잘 사용되지 않는다. ECMAScript에서 사용되지 않는 비표준이지만 최신 웹브라우저에서는 비공식적으로 지원하고 있다. 따라서 곧 표준 속성으로 지원될 확률이 높다.

기술 문서

fetch() 메소드의 사용

다음은 FormData 인터페이스를 활용하는 방법을 보여준다. 첫번째의 경우는 자바스크립트로 직접 전송할 폼을 생성하는 것이고 두번째의 경우는 웹 문서내 <form> 요소를 사용하여 전송할 FormData 인스턴스를 생성한다.

실제로 FormData를 사용하여 전송한 후 서버의 응답을 받아 사후 처리하는 것은 PromiseResponse 인터페이스를 참고하기 바란다.

form 전송

fetch() 메소드를 이용하여 form을 전송하기 위해서는 FormData 객체를 생성하여 fetch() 메소드의 body 옵션으로 설정해야 한다.

코드를 통한 전송 데이터 준비 및 전송
var formData = new FormData();
formData.append("username", document.querySelector("#username").value);
formData.append("useremail", document.querySelector("#useremail").value);

fetch("http://www.example.com/process.php", {
    method: "POST",
    body: formData
})
.then(response => response.json())
.then(json => console.log(JSON.stringify(json));

FormData 객체의 인스턴스를 생성한 후 append() 메소드를 사용하여 전송할 필드를 추가한다. 완성된 FormData 객체를 fetch() 메소드의 body 옵션으로 설정한다.

form 요소의 전송 데이터를 전송
<form id="myform">
  <dl>
    <dt>User name</dt>
    <dd><input name="username" type="text" /></dd>
    <dt>User email</dt>
    <dd><input name="useremail" type="text" /></dd>
  </dl>
</form>
var elForm = document.getElementById("myform");
var formData = new FormData(elForm);

fetch("http://www.example.com/process.php", {
    method: "POST",
    body: formData
})
.then(response => response.json())
.then(json => console.log(JSON.stringify(json));

지원 웹브라우저