在不离开当前页面的情况下使用Javascript访问页面

Question

我有一个Javascript文件在一个页面上运行，我想记录某些事件，因为他们发生。例如，我有一个网络商店，当人们向购物车中添加商品时，我想通过访问我构建的页面来记录此事件:

function log_event(id) {
window.location.href = 'https://example.com/log/cart.php?id=' + id;
return false;
}

log/cart.php页面实际上没有任何要显示的内容，它所做的只是将一条记录插入到数据库中，其中包含添加到购物车中的商品和日期。

调用这个函数的代码如下:

document.getElementById('add-to-cart').addEventListener('click', function() {
// Add to the cart
...
// Track the item that was added
let id = document.getElementById('add-to-cart').getAttribute('data-id');
log_event(id);
});

对于我当前的代码，log/cart.php实际上替换了当前的页面。我希望log/cart.php的开放只发生在后台，而不中断用户。我不希望它实际上打开一个浏览器选项卡或窗口，让用户停留在产品页面。

Answer 1

您可以向该端点发送AJAX请求:

function log_event(id) {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", 'https://example.com/log/cart.php?id=' + id, true);
xhttp.send();
return false;
}

fetch()也可以使用，但要注意它的浏览器支持(不支持IE)。