javascript - 使用sendBeacon替换AJAX

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

由于在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函数以相同的方式传递多个变量，您是否做了类似的事情？

最佳答案

您可以使用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