Fetch で x-www-form-urlencoded リクエストを送信するにはどうすればよいですか?

Fetch による x-www-form-urlencoded リクエストの送信

Web 開発では、フォームエンコードされたデータをサーバーに POST するのが一般的ですタスク。 Fetch API を使用してこれを実行するには、いくつかの手順が必要です。

• リクエスト パラメータの定義:

  • まず始めます。 POSTするフォームパラメータを定義します。提供された例では:

    {
        'userName': '[email protected]',
        'password': 'Password!',
        'grant_type': 'password'
    }

• リクエスト オブジェクトの構築:

  • 必要なリクエストを含む JavaScript オブジェクトプロパティ:

    var obj = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      },
    };

• エンコードフォームパラメータ:

  • フォームエンコードを含めるにはパラメータは URLSearchParams を使用しますオブジェクト:

    body: new URLSearchParams({
        'userName': '[email protected]',
        'password': 'Password!',
        'grant_type': 'password'
    })

• リクエストの実行:

  • 最後に、次を使用してリクエストを実行します。新しく建設されたオブジェクト:

    fetch('https://example.com/login', obj)
      .then(function(res) {
        // Do stuff with result
      }); 

• 単純化された例:

  • 簡素化のため、よりクリーンなアプローチfetch() でフォームパラメータとヘッダーの両方を直接指定することです。オプション:

    fetch('https://example.com/login', {
        method: 'POST',
        headers:{
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams({
            'userName': '[email protected]',
            'password': 'Password!',
            'grant_type': 'password'
        })
    });

詳細については、Mozilla Developer Network のドキュメントを参照してください: https://developer.mozilla.org/en-US/docs /Web/API/WindowOrWorkerGlobalScope/fetch

以上がFetch で x-www-form-urlencoded リクエストを送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。