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

Question

我正在使用 jQuery malsup ajaxForm plugin在表格上。我有一堆已提交的 POST 变量，并且工作正常，我想使用相同的帖子变量来执行“导出到文件”选项。这意味着两种提交类型使用相同的表单。

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

发生解除绑定(bind)后，当用户想要使用 AJAX 更改过滤器(不用于导出)时，我必须重新运行 ajaxForm 构造函数。

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

Answer 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
});

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

这有帮助吗？