我有一些参数,我想POST表单编码到我的服务器:

{
    'userName': 'test@gmail.com',
    'password': 'Password!',
    'grant_type': 'password'
}

我像这样发送我的请求(目前没有参数)

var obj = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  },
};
fetch('https://example.com/login', obj)
  .then(function(res) {
    // Do stuff with result
  }); 

如何在请求中包含表单编码的参数?


当前回答

只需将主体设置为如下所示

var reqBody = "username="+username+"&password="+password+"&grant_type=password";

then

fetch('url', {
      method: 'POST',
      headers: {
          //'Authorization': 'Bearer token',
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      },
      body: reqBody
  }).then((response) => response.json())
      .then((responseData) => {
          console.log(JSON.stringify(responseData));
      }).catch(err=>{console.log(err)})

其他回答

在最初的示例中,您有一个transformRequest函数,它将对象转换为Form Encoded数据。

在修改后的示例中,您已将其替换为JSON。stringify将对象转换为JSON。

在这两种情况下,你都有'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',所以在这两种情况下,您都声称要发送表单编码的数据。

使用你的表单编码函数,而不是JSON.stringify。


重新更新:

在第一个获取示例中,将主体设置为JSON值。

现在您已经创建了一个Form Encoded版本,但是您没有将主体设置为该值,而是创建了一个新对象,并将Form Encoded数据设置为该对象的属性。

不要创建额外的对象。把你的值赋给身体。

如果你正在使用JQuery,这也是有效的。

fetch(url, {
      method: 'POST', 
      body: $.param(data),
      headers:{
        'Content-Type': 'application/x-www-form-urlencoded'
      }
})

你可以使用UrlSearchParams,然后像这样做一个toString():

这里有一个简单的方法:

fetch('https://example.com/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    body: new UrlSearchParams(...{
        'userName': 'test@gmail.com',
        'password': 'Password!',
        'grant_type': 'password'
    })
    .toString()
})
.then(res => {
    //Deal with response:
})

不需要使用jQuery、querystring或手动组装有效负载。URLSearchParams是一种方法,这里是一个最简洁的答案与完整的请求示例:

fetch('https://example.com/login', {
  method: 'POST',
  body: new URLSearchParams({
    param: 'Some value',
    anotherParam: 'Another value'
  })
})
  .then(response => {
    // Do stuff with the response
  });

同样的技术使用async / await。

const login = async () => {
  const response = await fetch('https://example.com/login', {
    method: 'POST',
    body: new URLSearchParams({
      param: 'Some value',
      anotherParam: 'Another value'
    })
  })

  // Do stuff with the response
}

是的,您可以使用Axios或任何其他HTTP客户端库来代替本机获取。

你必须自己把x-www-form-urlencoded有效负载放在一起,就像这样:

var details = {
    'userName': 'test@gmail.com',
    'password': 'Password!',
    'grant_type': 'password'
};

var formBody = [];
for (var property in details) {
  var encodedKey = encodeURIComponent(property);
  var encodedValue = encodeURIComponent(details[property]);
  formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");

fetch('https://example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  body: formBody
})

注意,如果你在一个(足够现代的)浏览器中使用fetch,而不是React Native,你可以创建一个URLSearchParams对象并使用它作为主体,因为fetch标准声明,如果主体是一个URLSearchParams对象,那么它应该被序列化为application/x-www-form-urlencoded。然而,你不能在React Native中这样做,因为React Native没有实现URLSearchParams。