WEBAPI

WEBAPI

Draft
  • account_tree
  • bug_report

InterfaceFormData

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

하위 트리 탐색

  • Constructor

    • FormData()

      새로운 FormData를 인스턴스를 생성한다.
  • [[Prototype]]

    생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
    • 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() 메소드의 사용

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 type="text" name="username" /></dd>
    <dt>User email</dt>
    <dd><input type="text" name="useremail" /></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));

지원 웹브라우저