Fetch API를 사용하여 양식 데이터를 다양한 형식으로 어떻게 보내나요?

Fetch API를 사용하여 양식 데이터 게시

Fetch API를 활용하여 양식 데이터를 제출할 때 고려해야 할 두 가지 주요 형식이 있습니다.

Multipart/ Form-Data

FormData를 사용하여 요청 본문을 구성하면 데이터가 자동으로 multipart/form-data 형식으로 전송됩니다. 이는 FormData의 기본 동작이며 수정할 수 없습니다.

Application/x-www-form-urlencoded

application/x-www-form-urlencoded 형식으로 데이터를 보내려면 몇 가지 옵션이 있습니다:

1. URL 인코딩 문자열:

<code class="javascript">fetch("api/xxx", {
    body: "[email protected]&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
});</code>

2. URLSearchParams 개체:

<code class="javascript">const data = new URLSearchParams();
data.append("email", "example@email.com");
data.append("password", "mypassword");

fetch("api/xxx", {
    body: data,
    method: "post",
});</code>

URLSearchParams를 사용할 때는 올바른 콘텐츠 유형이 자동으로 설정되므로 Content-Type 헤더를 지정할 필요가 없습니다.

3. FormData의 URLSearchParams:

<code class="javascript">const data = new URLSearchParams(new FormData(formElement));

fetch("api/xxx", {
    body: data,
    method: "post",
});</code>

이 옵션을 사용하면 FormData 개체를 직접 전달하여 URLSearchParams 개체를 생성할 수 있습니다. 다만, 브라우저 지원이 제한적일 수 있으므로, 사용 전 반드시 철저한 테스트를 하시기 바랍니다.

위 내용은 Fetch API를 사용하여 양식 데이터를 다양한 형식으로 어떻게 보내나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!