是否有一种方法可以在没有表单的情况下使用POST方法发送数据,并且只使用纯JavaScript(而不是jQuery $.post())刷新页面?也许httprequest或其他东西(只是不能找到它现在)?


当前回答

这里有一个很好的函数,你(或其他人)可以在他们的代码中使用:

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);
    })
}

其他回答

有一种简单的方法可以包装数据并将其发送到服务器,就像使用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头,因为浏览器会注意到这一点。

领航员sendBeacon()。

如果你只是需要POST数据,不需要服务器的响应,最短的解决方案是使用navigator.sendBeacon():

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

navigator.sendBeacon('example.php', data);

这里最流行的答案没有显示如何从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();
}

你可以像下面这样使用XMLHttpRequest对象:

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xhr.send(someStuff);

代码会将someStuff发布到url。只要确保在创建XMLHttpRequest对象时,它是跨浏览器兼容的。关于如何做到这一点,有无数的例子。

const data = { username: 'example' };

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
 '           Content-Type': 'application/json',
           },
  body: JSON.stringify(data),
})
  .then(response => response.json())
  .then(data => {
      console.log('Success:', data);
     })
 .catch((error) => {
         console.error('Error:', error);
   });