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

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

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

发生这种解绑后,当用户想要使用AJAX更改filter时(不是用于导出),我必须重新运行ajaxForm构造函数。

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

使用自定义事件和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 }); 

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

这有帮助吗?

非常感谢Jonathan的上述答案。 我们也遇到了类似的问题,触发自定义事件对我们来说也是一招。 另外我要补充的是,如果正在使用malsup ajaxForm插件 ,我们应该调用’ajaxSubmit’而不是ajaxForm,因为ajaxForm不提交表单。

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