在 ajaxForm 插件上暂时禁用 ajax 提交的更好方法答案

【问题标题】：Better way to temporarily disable ajax submission on ajaxForm plugin在 ajaxForm 插件上暂时禁用 ajax 提交的更好方法
【发布时间】：2012-02-18 13:15:05
【问题描述】：

我在表单上使用 jQuery malsup ajaxForm plugin。我有一堆提交的 POST vars，这工作正常，我想使用相同的 post vars 来执行导出到文件选项。这意味着对两种提交类型使用相同的表单。

因为您无法通过 AJAX 提交下载文件，所以我在表单上使用 .unbind('submit').submit() 以防止之前分配的 ajax 事件处理程序触发。

在这种解除绑定发生后，当用户想要使用 AJAX 更改过滤器（而不是用于导出）时，我必须重新运行 ajaxForm 构造函数。

在我投入更多时间来修复边缘情况和一些错误之前，我想知道是否有更简洁的方法来做到这一点？

【问题讨论】：

伙计，你是我的英雄——我花了 2 个小时拉头发，试图弄清楚如何“解开”那个愚蠢的（好吧，不是真的）ajaxForm。你有没有找到更好的方法来做到这一点？

标签： forms jquery ajaxform

【解决方案1】：

使用自定义事件和trigger()!

首先，在表单上放置一个单选按钮，以允许用户在 AJAX/导出到文件之间切换。假设这个字段的名称是submitAction

其次，您的提交侦听器仅根据submitAction 无线电的值来决定接下来会发生什么。这是您触发自定义事件的地方（我们在第 3 步中定义它们）：

$('form.specialform').on('submit',function(e){
    e.preventDefault();
    var checked = $(this).closest('[name="submitAction"]').filter(':checked');
    if(checked.val() == 'ajax'){ //ajax!
        $(this).trigger('submitAJAX');
    } else { //export to file!
        $(this).trigger('submitExport');
    }
});

第三，用两个事件监听器定义你的自定义事件：

$('form.specialform').on('submitAJAX',function(e){
    //do AJAX call here
});

$('form.specialform').on('submitExport',function(e){
    //do file export here
});

如您所见，这样做可以避免多次解除绑定和重新绑定相同的事件处理程序的麻烦。

这有帮助吗？

【讨论】：

【解决方案2】：

非常感谢乔纳森的上述回答。我们也面临着类似的问题，触发自定义事件为我们解决了问题。我还要补充一点，如果使用malsup ajaxForm plugin，我们应该调用'ajaxSubmit'而不是ajaxForm，因为ajaxForm 不提交表单。

    $('form.specialForm').on('submitAJAX',function(e) {
        $(this).ajaxSubmit({
           target: '#query_output', 
           beforeSubmit:  showLoading,
           success:       hideLoading
       });
   });

【讨论】：