在卸载/卸载之前发送 Ajax 调用



场景:我正在创建一个活动注册模块,用户可以在其中从日历中选择一个日期进行预订,填写一些输入字段并支付预订日期的费用。 其中一个要求是,每个日期只能进行一次预订。 这种情况是两个人想在同一时间预订同一日期。因此,我们需要向后来预订日期的用户显示一条消息,表明该特定日期的预订已经在进行中。请稍后再回来查看

为此,每当用户选择日期时,我都会在我的数据库中创建一个临时条目。针对该条目,我可以向后来的其他用户显示消息。

从逻辑上讲,如果第一个用户:

  1. 选择其他日期。
  2. 关闭浏览器或离开页面

以便想要预订同一日期的第二个用户可以使用它。

问题:一旦用户更改其所选日期,我就可以删除该条目。我无法实现第二个。我写了一个函数,它将删除该行,并在卸载jQuery事件之前调用该函数。显然,该函数不适用于jQuery。

window.onbeforeunload = function(){
deleteTempEntry(); //This sends an ajax call to delete the entry. Not working.
alert("The second alert"); // even this alert doesn't work.
// I actually intend to use confirm box to make sure to not to delete the entry if the user does not leave the page.
confirm("Your current progress will be removed. Are you sure?"); 
//Calling this return function shows the warning message but none of the other code works.
//return 'Are you sure you want to leave?';
};

我尝试过,绑定/打开/纯 JS,但这些似乎都不起作用。

正如这里所解释的,由于安全原因,我实际上对onbeforeunload/unload事件无能为力。 有什么解决方法吗?

谢谢。

我需要这样的东西。但不幸的是,在onBeforenUnload中调用后端是不可靠的。大多数 AJAX 调用不会到达后端(有些可能会); 唯一有保证的调用是使用navigator.sendBeacon(url,data)。即使浏览器关闭,它也会发送 POST 请求。

您可以使用async: false发布数据,如下所示:

$(window).unload(function () {
$.ajax({
type: 'POST',
async: false,
url: 'your url',
data: {  }
});
});

尝试console.log并在onbeforeunload方法中返回。 也许用户在Ajax通过之前离开页面。

看: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

自 2011 年 5 月 25 日起,HTML5 规范规定调用

  • window.alert()
  • window.confirm()
  • window.prompt()

在此事件期间,可能会忽略命令。

您可以让客户端每 30 秒左右向服务器发送一次"检测信号",并使用上次发送的检测信号的时间戳以及对预订日期的引用更新数据库中的记录。然后运行一个每分钟左右运行的 cronjob,它会检查所有这些记录,如果其中一个记录结束了,比如说超过 120 秒,则删除该记录。

最新更新