在同一个表单中切换使用Ajax和普通post提交

译者：明明如月

审校：

蓝色漂流瓶

描述

我有一个通过ajax把数据发送到后台并将返回的数据显示到页面的一个div中的表单。

这倒没什么。但是遇到了一个新需求，需要为该表单添加一个导出功能。该功能可以把表单的数据导入到一个csv文件以便在Excel中的打开。

问题

没啥大不了的？之前我曾写过一篇《将数据输出到excel中》（
http://www.codeshare.co.uk/blog/how-to-export-data-to-excel-as-a-csv-file-in-c/）。但是因为这是一个通过ajax来交互的表单，这就意味着csv的内容也会被导入到表单的div中。

解决方案

我需要一个切实可行的解决方案。我就想到了需要根据点击不同按钮来改变表单提交模式。所以我就写了如下js或jquery代码：

你可以把这段js代码引入到你页面中，你只需要把对应的类添加到对应提交表单的按钮或超链接上即可。

如下所示：

译者注：

文中提到了closest 方法，平时用的不算太多。

科普一下：

closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。

如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。

如果什么都没找到则返回一个空的jQuery对象。

也就是说 点击按钮以后 上层查找form。

找到以后根据不同按钮设置对应data-ajax的值。

然后解绑该按钮的点击事件并触发点击事件(即调用else)。

另外还有一款jquery插件

http://plugins.jquery.com/form/

http://jquery.malsup.com/form/#getting-started

原地址：
http://www.codeshare.co.uk/blog/switch-between-ajax-and-post-back-in-the-same-form/