jQuery:向Ajax函数添加一个设置
我在每个ajax调用之前禁用一个按钮，并在调用进行竞争时重新启用它。我这样做就像：
jQuery.fn.buttonDisable = function(v) {
if(v)
$(this).prop('disabled', true).addClass('animate-load').parents('html').addClass('busy');
else
$(this).prop('disabled', false).removeClass('animate-load').parents('html').removeClass('busy');
};
$('.element button').buttonDisable(true);
$.ajax({
type: "post",
dataType: "json",
url: "/api/login",
data: {
username : username.val(),
password : password.val(),
}
})
.done(function(data) {
$('.element button').buttonDisable(false);
...是否可以将参数传递到ajax函数并使其自动化？类似于：
$.ajax({
button: $('.element button'),
...因此，在ajax调用开始之前，它将运行以下命令：
$('.element button').prop('disabled', true).addClass('animate-load').parents('html').addClass('busy');完成后，运行：
$('.element button').prop('disabled', false).removeClass('animate-load').parents('html').removeClass('busy');回答 4
Stack Overflow用户
发布于 2015-03-23 14:21:30
其他列出的方法(.ajaxStart或$.ajaxSetup)中的任何一个都能很好地“全局”增强ajax的功能，但是我建议您不要这么做。对$.ajax的每个调用都将通过这些方法传递，包括由第三方库执行的调用。这可能不是最终想要的行为。
如果这是针对任何“大型”项目，我将编写自己的$.ajax方法，可以在我想要的任何地方使用，如下所示：
(function ( $ ) {
var root = $('html');
function doAjax(options) {
var jqXHR = $.ajax(options);
if (options.disableSelection) {
root.addClass('busy');
options.disableSelection
.prop('disabled', true).addClass('animate-load')
jqXHR.always(function() {
root.removeClass('busy');
options.disableSelection
.prop('disabled', false).removeClass('animate-load');
});
}
return jqXHR;
}
window.doAjax = doAjax;
})(jQuery);然后，您可以替换$.ajax调用，您希望使用doAjax而不是$.ajax来实现该功能，然后传入您的disableSelection: $('.element button')。
您还可以在options全局事件(.ajaxComplete和.ajaxStart)中以及在beforeSend和complete中作为this (如果您采用$.ajaxSetup路由)传递complete。
另外，也许可以看看$.ajaxPrefilter --您可以访问其中的所有东西。
(function ($) {
// this value will never change, so why bother looking it up more than once
var root = $('html');
// we get to check the options of every $.ajax call, awesome!
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
if (options.disableSelection) {
root.addClass('busy');
options.disableSelection
.prop('disabled', true).addClass('animate-load');
jqXHR.always(function() {
root.removeClass('busy');
options.disableSelection
.prop('disabled', false).removeClass('animate-load');
});
}
});
})(jQuery);
// and then somewhere else when you make a call, pass disableSelection
$.ajax({
type: "post",
dataType: "json",
url: "/api/login",
// check out this method btw, it rules
data: $('.element form').serialize(),
disableSelection: $('.element button')
})
.done(function(data) {
// ....
});虽然我倾向于使用doAjax方法，但这两种方法都有各自的优点，因为很明显，这种方法有一些标准jQuery.ajax没有提供的选项。如果您确实决定使用预筛选器，并且代码将由多个人编辑/处理，那么我强烈建议在disableSelection属性中添加一个明显的命名空间，将其称为myCompanyDisableSelection，这样就可以搜索代码库中的字符串，而不是尝试阅读jQuery文档来找出disableSelection到底在做什么:)
Stack Overflow用户
发布于 2015-03-23 14:08:52
与其扩展ajax功能，不如使用jQuery ajaxStart和ajaxComplete回调：
jQuery.fn.buttonDisable = function(v) {
if(v)
$(this).prop('disabled', true).addClass('animate-load').parents('html').addClass('busy');
else
$(this).prop('disabled', false).removeClass('animate-load').parents('html').removeClass('busy');
};
$( document ).ajaxStart(function() {
$('.element button').buttonDisable(true);
});
$( document ).ajaxComplete(function() {
$('.element button').buttonDisable(false);
});顺便说一句：.parents('html')可能是有史以来最不合适的东西，首先使用$('html')，或者至少使用.closest('html')。
此方法将全局运行该函数。如果要单独控制ajax调用，请在ajax调用中使用beforeSend和complete。
Stack Overflow用户
发布于 2015-03-23 14:11:45
尝试如下所示：
$.ajax({
type: "post",
dataType: "json",
url: "/api/login",
data: {
username: username.val(),
password: password.val(),
},
beforeSend: function () {
$('.element button').prop('disabled', true).addClass('animate-load').parents('html').addClass('busy');
},
success: function () {
$('.element button').prop('disabled', false).removeClass('animate-load').parents('html').removeClass('busy');
},
})https://stackoverflow.com/questions/29212220
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号