>웹 프론트엔드 >JS 튜토리얼 >Fetch API를 사용하여 양식 데이터를 \'application/x-www-form-urlencoded\'로 게시하는 방법은 무엇입니까?

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

Barbara Streisand
Barbara Streisand원래의
2024-11-03 05:28:02927검색

How to Post Form Data as

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

Fetch API의 FormData 인터페이스를 사용하여 양식 데이터를 게시하는 경우 기본 동작을 이해하는 것이 중요합니다. 기본적으로 "application/x-www-form-urlencoded" 형식과 호환되지 않는 "multipart/form-data" 형식을 사용하여 데이터를 보냅니다.

양식 데이터를 다음과 같이 게시하려는 경우 Fetch API를 사용하는 "application/x-www-form-urlencoded"를 사용하면 다음을 따를 수 있습니다. 단계:

  1. FormData를 URLSearchParams로 변환: 루프를 사용하여 FormData 개체를 반복하고 각 키-값 쌍을 URLSearchParams 개체에 추가합니다.

    <code class="javascript">const data = new URLSearchParams();
    for (const pair of new FormData(formElement)) {
        data.append(pair[0], pair[1]);
    }</code>

    OR, 실험적인 방법을 사용하세요. 방법:

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

    참고: 사용하기 전에 브라우저가 후자의 방법을 지원하는지 확인하세요.

  2. Fetch API를 사용하여 데이터 보내기: 본문이 URLSearchParams 개체로 설정된 POST 요청입니다. 기본값은 "application/x-www-form-urlencoded"이므로 Content-Type 헤더를 지정하지 마십시오.

    <code class="javascript">fetch(url, {
        method: 'post',
        body: data,
    })
    .then(…);</code>

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:스트라피 — 왜다음 기사:스트라피 — 왜