为什么删除Ajax请求在Firefox上只能工作一次

Question

我使用jQuery Ajax请求访问PHP脚本，在该脚本中，我从MySql数据库中删除数据，如下所示

$(document).on("click", "#del_mon", function(e) {
e.preventDefault();
$.ajax({
url: "http://localhost/test/del.php"
});
location.reload(true);
});

#del_mon是我的按钮。

这段代码只在Firefox上运行一次，以后就不能了。我在Chrome(版本80.0.3987.122(和Edge(版本80.0.361.62(上试过这个，在这两个版本上都能工作多次。我使用的Firefox版本是73.0.1并且是最新的。我也使用Ajax请求来添加和读取数据库中的数据，这在Firefox上运行良好。

我的控制台没有错误。

我试图找到解决方案，并从这个更改了我的点击功能

$("#del_mon").click(function(e) {});

到这个

$(document).on("click", "#del_mon", function(e) {});

如本文所示。但这对我不起作用。

Answer 1

重新加载页面可能会取消即将发送的AJAX请求。

您应该在收到响应时重新加载，而不是在发送AJAX请求后立即重新加载。

$(document).on("click", "#del_mon", function(e) {
e.preventDefault();
$.ajax({
url: "http://localhost/test/del.php",
success: function() {
location.reload(true);
}
});
});

Answer 2

您应该在调用完成之前尝试执行操作。

$(document).on("click", "#del_mon", function(e) {
e.preventDefault();
$.ajax({
url: "http://localhost/test/del.php",
success: function() {
location.reload(true);
}
});
});

正如@Barmar之前所说，但我建议在未来的迭代中使用done和catch，只是为了知道问题是否在调用中。

async function getData(){
const data =  await $.ajax({
url: 'http://localhost/test/del.php',
type: 'get',
dataType: 'json'
});
return data;
}
$(document).on("click", "#del_mon", function(e) {
e.preventDefault();
getData().then((response) => {
console.log("done ",response);
location.reload(true);
}).catch((error) => {
//console.log("fail ", error);
});

});