时间戳

首页 > 解决方案 > 用 sendBeacon 替换 AJAX

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 函数以相同的方式传递多个变量，你做过类似的事情吗？

标签： javascriptjquery

解决方案

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

推荐阅读