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

Question

我在表单上使用jQuery malsup ajaxForm插件。我已经提交了一堆POST变量，这很好，我想使用相同的POST变量来执行导出到文件选项。这意味着对两种提交类型使用相同的表单。

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

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

在我花更多时间修复边缘案例和几个bug之前，我想知道是否有更干净的方法可以做到这一点？

Answer 1

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

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

其次，您的submit监听器只是根据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
});

正如您所看到的，这样做可以避免多次取消绑定和重新绑定相同的事件处理程序的麻烦。

这有帮助吗？

Answer 2

非常感谢Jonathan的回答。我们也面临着类似的问题，触发自定义事件对我们起到了作用。此外，我想补充的是，如果使用malsup-ajaxForm插件，我们应该调用"ajaxSubmit"而不是ajaxForm，因为ajaxForm没有提交表单。

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