Fetch API를 사용하여 'application/x-www-form-urlencoded'로 양식 데이터를 보내는 방법은 무엇입니까?

Application/x-www-form-urlencoded를 사용하여 Fetch API로 양식 데이터 게시

양식을 제출할 때 양식을 보내는 방법에 대한 질문이 발생할 수 있습니다. Fetch API를 사용하여 데이터를 수집합니다. 기본적으로 FormData를 사용하여 본문을 전송하면 데이터가 multipart/form-data로 전송됩니다. 그러나 데이터를 application/x-www-form-urlencoded로 전송하려는 경우 몇 가지 옵션을 사용할 수 있습니다.

Multipart/Form-Data 형식의 FormData

FormData 사용 multipart/form-data 형식으로 데이터를 보내도록 자동으로 잠급니다. 이를 방지하려면 FormData를 사용하는 대신 URL 인코딩 문자열이나 URLSearchParams 객체를 수동으로 생성할 수 있습니다. 다음은 양식 요소를 반복하고 URLSearchParams 개체를 작성하는 코드 조각입니다.

const data = new URLSearchParams();
for (const pair of new FormData(formElement)) {
    data.append(pair[0], pair[1]);
}

fetch(url, {
    method: 'post',
    body: data,
})
.then(…);

참고: Content-Type 헤더를 명시적으로 지정할 필요가 없습니다.

FormData를 사용한 URLSearchParams

또 다른 실험적 옵션은 URLSearchParams 객체를 생성하고 값을 반복하는 대신 FormData 객체를 직접 전달하는 것입니다.

const data = new URLSearchParams(new FormData(formElement));

이 방법은 일부 실험적 지원을 제공합니다. 브라우저에서는 사용 전 철저한 테스트를 권장합니다.

위 내용은 Fetch API를 사용하여 'application/x-www-form-urlencoded'로 양식 데이터를 보내는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!