页面卸载时使用JQuery的 AJAX 请求

gupuwyp2  于 2023-01-16  发布在  jQuery
关注(0)|答案(7)|浏览(162)

我正在努力做到这一点:

$(window).unload( function () { 

$.ajax({
    type: "POST",
    url: "http://localhost:8888/test.php?",
    data: "test",
    success: function(msg){
         alert( "Data Saved: " + msg );
    }
}); 
alert (c);
});

但是,成功警告从来没有显示,这个请求似乎甚至没有击中服务器。我做错了什么?

jfewjypa

jfewjypa1#

我认为您需要使用async : false参数使请求同步(默认情况下是异步的)。
同步请求会锁定浏览器,直到请求完成。如果请求是异步的,页面会继续卸载。它足够快,甚至请求都没有时间发出。

brgchamk

brgchamk2#

尝试使用async = false调用它;

jQuery.ajax({url:"http://localhost:8888/test.php?", async:false})

我刚试过。

ddrv8njm

ddrv8njm3#

最好的解决方案是使用navigator.sendBeacon。这是一个全新的功能,开始在新版本的浏览器中实现。该功能在比Chrome 39和Firefox 31更新的浏览器中可用。在撰写本文时,Internet Explorer和Safari不支持该功能。为了确保您的请求在不支持新功能的浏览器中发送,您可以使用此解决方案:

var navigator.sendBeacon = navigator.sendBeacon || function (url, data) {
  var client = new XMLHttpRequest();
  client.open("POST", url, false); // third parameter indicates sync xhr
  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
  client.send(data);
};

但是,此函数不允许您注册onsuccess回调。

oymdgrw7

oymdgrw74#

HTML 5规范规定alert()prompt()等在window.unload()事件期间不可用。有关详细信息,请参阅window.unload()。您可以使用console.log('success');而不是alert()检查结果。

mm9b1k5b

mm9b1k5b5#

也许使用onbeforeunload事件会更成功?

$(window).bind('beforeunload', ...
oymdgrw7

oymdgrw76#

你的函数和 AJAX 调用看起来都很好,所以我猜你的浏览器窗口在ajax调用有时间往返服务器之前就关闭了。当窗口关闭时,ajax调用可能会返回一些东西,尝试在ajax调用中添加error函数,看看是否是这种情况:

error: function (xhr, textStatus) {
    alert('Server error: '+ textStatus);
}
yqlxgs2m

yqlxgs2m7#

MDN建议对visibilitychange事件使用navigator.sendBeacon

$(window).on("visibilitychange", (event) => {
    if (document.visibilityState === 'hidden') {
        navigator.sendBeacon("https://example.com/endpoint", yourDataToSend);
    }
});

(非jquery版本将使用window.addEventListener("visibilitychange")。)
MDN开始:
Web站点通常希望在用户完成页面后将分析或诊断发送到服务器,最可靠的方法是发送visibilitychange事件的数据
应避免使用unloadbeforeunload事件。
This SO post似乎对这种情况也有很好的研究。

相关问题