为什么在通过ajax提交时使用表单标签?

spr*_*man 77 html javascript forms ajax

哲学问题:

假设我有一个需要 javascript和现代浏览器的网络应用程序,因此渐进式增强不是问题.如果我的表单是通过javascript构建的,并且我的数据更新都是通过ajax POST和PUT完成的,那么我真的有理由将我的控件包装在表单标签中吗?如果我仍然要使用标签,比如说出于语义或结构原因,是否有任何理由要采取我将忽略的动作和方法参数?从我早期的时代开始,这种感觉就像是一种拖延.

Nic*_*ole 70

通过在表单标记内包装输入,至少提供了一个重要的用户体验功能:

输入键将提交表单. 事实上,在Mobile Safari中,这就是你如何让"Go"按钮出现在键盘上.

如果没有包装输入的表单,则无需提交.

您当然可以通过按键事件提供enter-key行为,但我不知道这是否适用于移动设备.我不了解你,但我宁愿使用浏览器提供的语义而不是用事件来模仿它们.

在您的情况下,您只需为onsubmit表单提供一个事件处理程序,这将提交您的AJAX,然后return false取消实际提交.

您可以简单地提供action=""(这意味着"自我"),而method不是必需的 - 它默认为GET.


kap*_*apa 15

如果您不需要渐进增强,理论上您不需要它们.

另一方面,forms有一些很酷的分组和语义效果.使用它们,您可以逻辑地对表单元素进行分组,并使脚本更容易收集某些元素的值.

例如,如果你想ajax-提交一些用户输入,总是更容易说:"让我们采取这种形式的所有元素并提交它们"而不是说"让我们接受这个输入,这两个选择和这三个textareas并提交它们".根据我的经验,如果form标签存在,它实际上有助于开发人员.


End*_*age 12

AJAX非常棒,但正如JamWaffles(+1给他)所说,使用form标签提供了一种后备方法.

我个人使用表单标签,甚至是我用AJAX提交的东西,因为它在语法上是清晰的,并且可以轻松获取特定表单中的所有输入.是的,你可以用a div或者其他任何东西来做,但正如我所说,使用表单在语法上很好.

顺便提一下,屏幕阅读器会以form不同的方式处理内容,因此无论您选择哪种方式,都会考虑可访问性问题.请注意,轶事证据表明Google在其排名中考虑了可访问性,因此如果SEO是您的关注点,请使用表单并正确执行.


小智 6

总结:表单适用于MVC,简单的Web应用程序,不适合面向组件的富Web应用程序.

原因:表单不能嵌套其他形式:面向组件的体系结构的巨大限制.

细节:对于典型的MVC应用程序,表单很棒.在使用大量javascript和AJAX以及大量组件的丰富,复杂的Web应用程序中,我不喜欢表单.原因:表单无法嵌套其他表单.然后,如果每个组件呈现一个表单,组件就不能相互嵌套.太糟糕了.通过将所有表单更改为div,我可以嵌套它们,每当我想要获取所有参数以便将它们传递给ajax时,我只是(使用jQuery):

$( "#id_of_my_div")找到( "[名]")序列化().

(或其他一些过滤)

代替:

$( "#id_of_my_form")序列化().

虽然,出于感情和语义的原因,我仍然在表达我的divs something_form时将其命名为表单.