javascript - 用 sendBeacon 替代 AJAX

Question

提前抱歉，我的母语不是英语:(

由于在 Chrome 版本 80 中，AJAX 查询不再在卸载事件中工作，我需要另一种选择，我读到了有关 Navigator.sendBeacon 的问题是我没有找到发送多个数据的示例，例如在 AJAX 中这个:

$(window).on('unload', function() {
    console.log('ajax unload');
    $.ajax({
        type: 'POST',
        url: 'config/myphpfile.php',
        async: false,
        data: {
            xvar1: var1,
            xvar2: var2,
            xvar3: 0
        },
        success: function(data) {
            console.log('work!');
        }
    });

正如你在这个AJAX事件中看到的，它向我的PHP发送了3个变量，其中一个var2是一个数组，我如何以与Navigator.sendBeacon函数相同的方式传递多个变量，你完成了吗类似的东西？

Answer 1

您可以使用 FormData 对象

// URL to send the data to
let url = '/api/my-endpoint';

// Create a new FormData and add a key/value pair
let data = new FormData();

// Append data to FormData object
data.append('xvar1', var1);
data.append('xvar2', var2);
data.append('xvar3', 0);

let result = navigator.sendBeacon(url, data);

if (result) { 
    console.log('Success!');
} else {
    console.log('Failure.');
}

我的解决方案来自:https://www.smashingmagazine.com/2018/07/logging-activity-web-beacon-api/#using-navigator-sendbeacon

在此处了解有关 FormData 对象的更多信息: https://developer.mozilla.org/en-US/docs/Web/API/FormData