Question

我在表单上使用jQuery malsup ajaxForm plugin。我有一堆提交的POST变量，这个工作正常，我想使用相同的post vars来执行Export to file选项。这意味着对两种提交类型使用相同的表单。

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

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

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

Answer 1

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

首先，在表单上放置一个单选按钮，允许用户在AJAX / Export to file之间切换。假设此字段的名称为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
});

正如您所看到的，以这种方式执行此操作可以避免多次解绑和重新绑定相同的事件处理程序。

这有帮助吗？

Answer 2

非常感谢Jonathan的上述答案。我们也面临着类似的问题，并且触发自定义事件对我们来说是个窍门。另外我想补充一点，如果正在使用malsup ajaxForm plugin，我们应该调用'ajaxSubmit'而不是ajaxForm，因为ajaxForm不提交表单。

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

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

2 个答案: