用sendBeacon替换AJAX

Question

我很抱歉，我的母语不是英语：

由于在Chrome版本80中，AJAX查询不再在unload事件中工作，我需要另一个替代方法，我读到关于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发送了三个变量，其中一个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