我有一些参数，我想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
});
如何在请求中包含表单编码的参数?
当前回答
如果你正在使用JQuery，这也是有效的。
fetch(url, {
method: 'POST',
body: $.param(data),
headers:{
'Content-Type': 'application/x-www-form-urlencoded'
}
})
其他回答
在最初的示例中，您有一个transformRequest函数，它将对象转换为Form Encoded数据。
在修改后的示例中，您已将其替换为JSON。stringify将对象转换为JSON。
在这两种情况下，你都有'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'，所以在这两种情况下，您都声称要发送表单编码的数据。
使用你的表单编码函数，而不是JSON.stringify。
重新更新:
在第一个获取示例中，将主体设置为JSON值。
现在您已经创建了一个Form Encoded版本，但是您没有将主体设置为该值，而是创建了一个新对象，并将Form Encoded数据设置为该对象的属性。
不要创建额外的对象。把你的值赋给身体。
对于上传表单编码的POST请求，我建议使用FormData对象。
示例代码:
var params = {
userName: 'test@gmail.com',
password: 'Password!',
grant_type: 'password'
};
var formData = new FormData();
for (var k in params) {
formData.append(k, params[k]);
}
var request = {
method: 'POST',
headers: headers,
body: formData
};
fetch(url, request);
不需要使用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客户端库来代替本机获取。
在一个简单的函数中包装取回
async function post_www_url_encdoded(url, data) {
const body = new URLSearchParams();
for (let key in data) {
body.append(key, data[key]);
}
return await fetch(url, { method: "POST", body });
}
const response = await post_www_url_encdoded("https://example.com/login", {
"name":"ali",
"password": "1234"});
if (response.ok){ console.log("posted!"); }
你必须自己把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。
