navigator.sendBeacon 和 application/x-www-form-urlencoded

navigator.sendBeacon with application/x-www-form-urlencoded

我正在尝试使用 navigator.sendBeaconbeforeunload 事件上发送 POST 请求,但数据没有到达 PHP $_POST.我认为这是因为在使用 navigator.sendBeacon 时 header Content-Type 总是设置为 text/plain;charset=UTF-8,但在我的例子中,因为我需要发送一个查询字符串,因此使用 application/x-www-form-urlencoded.

var amountOfApples = 0;

...

addEventListener("beforeunload", function(e) {
    navigator.sendBeacon("save.php", "key=apples&value=" + amountOfApples);
});

我怎样才能做到这一点并确保 header 设置为 application/x-www-form-urlencoded

通过parse_str()阅读php://input和运行。基本上:

$MY_POST = null;
parse_str(file_get_contents('php://input'), $MY_POST);
Beacon API 使用的

Content-Type header 取决于您传递给 sendBeacon 第二个参数的实例类型。

application/x-www-form-urlencoded

要发送 application/x-www-form-urlencoded,请使用 UrlSearchParams 实例。

var params = new URLSearchParams({
   key : 'apples',
   values : amountOfApples
});
navigator.sendBeacon(anUrl, params);

multipart/form-data

要发送 multipart/form-data header,请使用 FormData 实例。

var params = new FormData();
params.append('key', 'apples');
params.append('value', amountOfApples);
navigator.sendBeacon(anUrl, params);

application/json

要发送 application/json header,请使用 Blob 并设置其类型。

var data = {
   key : 'apples',
   values : amountOfApples
};

var params = new Blob(
    [JSON.stringify(data)], 
    {type : 'application/json'}
);
navigator.sendBeacon(anUrl, params);