我正在使用jQuery和jQuery UI。我体验到用户有时会多次触发ajax调用,因为触发调用的按钮/链接在单击后不会立即被禁用。为了防止这种情况的发生,现在我在“ beforeSend”操作中禁用按钮/链接。
这是典型的Ajax Call对我来说的样子:
$.ajax({ type: "POST", url: "someURL" data: "someDataString", beforeSend: function(msg){ $(".button").button("disable"); }, success: function(msg){ $(".button").button("enable"); // some user Feedback } });
但是我不想在每个Ajax调用中添加此按钮禁用逻辑。有什么办法全局定义每次在/ after和ajax-call之前都会被调用的函数吗?
有几种方法可以实现您的要求。它们之间的唯一区别是它们的实现方式,由您选择哪种方法最适合您的特定情况。方法还取决于您使用的jQuery版本,因此我将把答案分为两部分。
初始化后添加多个回调
从jQuery 1.5开始,您可以通过全面改进的API和引入的新jqXHR对象添加多个回调.ajax。它实现Promise(请参见Deferreds)接口,我们可以利用它来发挥我们的优势:
jqXHR
.ajax
// fn to handle button-toggling var toggleButton = function() { var button = $(".button"); button.button(button.button("option", "disabled") ? "enable" : "disable"); } // store returned jqXHR object in a var so we can reference to it var req = $.ajax({ beforeSend: toggleButton, success: function(msg){ /* Do what you want */ } }).success(toggleButton); // we can add even more callbacks req.success(function(){ ... });
使用预过滤器
jQuery 1.5还引入了预过滤器,可用于替换jQuery 1.4的全局配置:
// good practice: don't repeat yourself, especially selectors var button = $(".button"); $.ajaxPrefilter(function(options, _, jqXHR) { button.button("disable"); jqXHR.complete(function() { button.button("enable"); }); });
注意:$ .ajax条目的jqXHR部分具有有关使用的通知jqXHR.success():
jqXHR.success()
弃用通知:从jQuery 1.8开始,不再使用jqXHR.success(),jqXHR.error()和jqXHR.complete()回调。要准备将其最终删除的代码,请改用jqXHR.done(),jqXHR.fail()和jqXHR.always()。
事件和全局配置
使用.ajaxStart和.ajaxStop将回调绑定到特定选择器。触发这些回调的事件将在所有Ajax请求上触发。
.ajaxStart
.ajaxStop
$(".button").ajaxStart(function(){ $(this).button("disable"); }).ajaxStop(function(){ $(this).button("enable"); });
使用.ajaxSetup设置一个全局AJAX配置。设置对象传递给.ajaxSetup将被应用到所有的Ajax请求,即使那些由速记制造.get,.getJSON和.post。请注意,不建议这样做,因为它很容易破坏其功能。
.ajaxSetup
.get
.getJSON
.post
$.ajaxSetup({ beforeSend: function(){ $(".button").button("disable"); }, success: function(){ $(".button").button("enable"); } });
过滤全局事件回调中的请求
如果您需要过滤某些请求,则可以使用,.ajaxSend并.ajaxComplete在哪里可以检查Ajax settings对象。像这样:
.ajaxSend
.ajaxComplete
settings
var button = $(".button"); // fn to handle filtering and button-toggling var toggleButton = function(settings) { if (settings.url == "/specific/url") button.button(button.button("option", "disabled") ? "enable" : "disable"); } }; // bind handlers to the callbacks button.ajaxSend(function(e,x,settings){ toggleButton(settings); }).ajaxComplete(function(e,x,settings){ toggleButton(settings); });
通过对传递给回调处理程序.ajaxSetup的settings对象进行相同类型的检查,也可以使用前面提到的方法来完成。