3

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

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

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

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

4

2 回答 2

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

如您所见，这样做可以避免多次取消绑定和重新绑定相同的事件处理程序的混乱。

这有帮助吗？

于 2012-08-22T01:56:12.107 回答
0

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

    $('form.specialForm').on('submitAJAX',function(e) {
        $(this).ajaxSubmit({
           target: '#query_output', 
           beforeSubmit:  showLoading,
           success:       hideLoading
       });
   });
于 2014-02-28T06:44:08.910 回答