jQuery通过每个函数调用存储和执行以前的AJAX HTTP请求

Question

我有一个函数，它由<button>元素的onclick事件调用。该函数的目的是使用引导程序弹出一个模式对话框，并使用AJAX调用显示更新的内容。URL每次都不同。每次关闭模式对话框时，都会使用hidden.bs.modal事件处理程序清除该对话框的内容。

我遇到的问题很奇怪。第一个请求运行良好，并按预期显示内容。任何后续调用都会附加到前一个调用，并且每次调用的数量似乎都会增加。执行所有以前调用的历史记录。这几乎就像以前的调用都被缓存了一样。

例如：

单击1

• 点击1个HTTP请求

单击2

• 单击1 HTTP请求<lt；不应运行此请求
• 单击2 HTTP请求

单击3

• 单击1 HTTP请求<lt；不应运行此请求
• 单击2 HTTP请求<lt；不应运行此重复测试
• 单击3 HTTP请求

为什么会发生这种情况，我该如何解决？

按钮：

<a role="button" class="btn btn-primary" onclick="showInModal('some/url/here/1022/17');">Button</a>

功能

//Modal dialog ajax
var loadingSpinner = '<div class="modal-content"><div class="model-body"><div class="loading-spinner"></div></div></div>';

$(document).on('hidden.bs.modal', "#pageModal", function (e) {
$(".modal .modal-dialog").html(loadingSpinner);
});

showInModal = (url) => {
$(document).on('shown.bs.modal', "#pageModal", function (e) {
$.ajax({
type: "GET",
url: url,
success: function (res) {
$(".modal .modal-dialog").html(res);
},
cache: false
});
});
$("#pageModal").modal('show');
}

Answer 1

每次调用函数时，都会添加一个新的.on('shown.bs.modal'事件侦听器。每个侦听器都在发出一个请求。

我不认为ajax真的需要该事件，只需在success回调中显示模态即可。或者显示带有加载图标的模态，直到请求完成

showInModal = (url) => {

$.ajax({
type: "GET",
url: url,
success: function (res) {
$(".modal .modal-dialog").html(res);
$("#pageModal").modal('show');
},
cache: false
});    
}