是否有一种方法可以在没有表单的情况下使用POST方法发送数据，并且只使用纯JavaScript(而不是jQuery $.post())刷新页面?也许httprequest或其他东西(只是不能找到它现在)?
当前回答
这里最流行的答案没有显示如何从POST中获取数据。此外，流行的“fetch”解决方案在最新版本的Chrome中无法工作，当发送数据到最新版本的NodeJS时，除非你传递报头并打开response.json()承诺。此外，流行的答案不使用async/await。
这是我能想到的最干净、最完整的解决方案。
async function postJsonData(jsonObject) {
const response = await fetch("/echo", {
method: "POST",
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(jsonObject)
});
const actualResponse = await response.json();
}
其他回答
这里有一个很好的函数，你(或其他人)可以在他们的代码中使用:
function post(url, data) {
return new Promise((res, rej) => {
let stringified = "";
for (const [key, value] of Object.entries(data))
stringified += `${stringified != '' ? '&' : ''}${key}=${value}`
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState == 4)
if (xhr.status == 200)
res(xhr.responseText)
else
rej({ code: xhr.status, text: xhr.responseText })
}
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(stringified);
})
}
你可以使用XMLHttpRequest, fetch API，… 如果您想使用XMLHttpRequest，可以执行以下操作
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
name: "Deska",
email: "deska@gmail.com",
phone: "342234553"
}));
xhr.onload = function() {
var data = JSON.parse(this.responseText);
console.log(data);
};
或者如果你想使用取回API
fetch(url, {
method:"POST",
body: JSON.stringify({
name: "Deska",
email: "deska@gmail.com",
phone: "342234553"
})
}).then(result => {
// do something with the result
console.log("Completed with result:", result);
}).catch(err => {
// if any error occured, then catch it here
console.error(err);
});
你可以发送它并将数据插入到body:
var xhr = new XMLHttpRequest();
xhr.open("POST", yourUrl, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
value: value
}));
顺便说一下，对于get请求:
var xhr = new XMLHttpRequest();
// we defined the xhr
xhr.onreadystatechange = function () {
if (this.readyState != 4) return;
if (this.status == 200) {
var data = JSON.parse(this.responseText);
// we get the returned data
}
// end of state change: it can be after some time (async)
};
xhr.open('GET', yourUrl, true);
xhr.send();
有一种简单的方法可以包装数据并将其发送到服务器，就像使用POST发送HTML表单一样。 你可以使用FormData对象，如下所示:
data = new FormData()
data.set('Foo',1)
data.set('Bar','boo')
let request = new XMLHttpRequest();
request.open("POST", 'some_url/', true);
request.send(data)
现在您可以在服务器端处理数据，就像处理常规HTML表单一样。
额外的信息
建议您在发送FormData时不要设置Content-Type头，因为浏览器会注意到这一点。
这里最流行的答案没有显示如何从POST中获取数据。此外，流行的“fetch”解决方案在最新版本的Chrome中无法工作，当发送数据到最新版本的NodeJS时，除非你传递报头并打开response.json()承诺。此外，流行的答案不使用async/await。
这是我能想到的最干净、最完整的解决方案。
async function postJsonData(jsonObject) {
const response = await fetch("/echo", {
method: "POST",
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(jsonObject)
});
const actualResponse = await response.json();
}
