如何使用 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 开发者网络文档以获取更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

以上是如何使用 Fetch 发送 x-www-form-urlencoded 请求？的详细内容。更多信息请关注PHP中文网其他相关文章！