领航员。带应用程序的sendBeacon/x-www-form-urlencoded

Question

我正在尝试使用navigator在beforeuload事件上发送POST请求。sendBeacon，但数据没有到达PHP$\u POST。我认为这是因为当使用navigator时。sendBeacon标题内容类型始终设置为文本/普通；charset=UTF-8，但在我的例子中，因为我需要发送一个查询字符串，因此使用application/x-www-form-urlencoded。

var amountOfApples = 0;

...

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

如何做到这一点，并确保标头设置为Application/x-wow-form-urlencoded？




Answer 1

阅读php://input并通过parse_str（）运行它。基本上：

$MY_POST = null;
parse_str(file_get_contents('php://input'), $MY_POST);

Answer 2

Beacon API使用的Content-Type标头取决于传递给sendBeacon第二个参数的实例类型。

要发送应用程序/x-www-form-urlencoded，请使用urlsearchparms实例。

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

要发送multipart/form data标题，请使用FormData实例。

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

要发送application/json标题，请使用Blob并设置其类型。

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

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