通过 ajax 提交时,为什么要使用表单标记?

哲学问题:

假设我有一个网络应用程序,使用的是 requires javascript 和现代浏览器,所以渐进增强不是问题。如果我的表单是通过 javascript 构建的,而我的数据更新都是通过 ajax POST & PUTs 完成的,那么真的有必要将控件包装在 form 标记中吗?如果我仍然要使用标签,比如出于语义或者结构上的原因,有没有什么理由让我忽略动作和方法参数呢?对我来说,感觉就像是旧时代的遗物。

16142 次浏览

我不明白你为什么要在这里使用表单标签。使用表单标记(除了让您的标记进行验证之外)的唯一原因是,您要让用户使用 sumbit 输入或按钮标记“提交”数据。如果您不需要这样做,那么就没有必要填写表单。但是,不确定它是否会被认为是“有效的”标记。如果你使用它,你可以只做 <form action="">,因为 action 是表单标签唯一需要的属性。然而,你提出了一个很好的观点,未来的 Web 应用程序可能不再需要表单和传统的提交方法。很有趣,让我很开心。呵呵:)

我没看出来。我目前正在构建一个使用 <form>的 web 应用程序,但是我正在使用它们,所以如果用户禁用了 JavaScript,我有一个备用方法(一个 e.preventDefault会停止正常的表单发布)。对于你的情况,你说用户必须有 JavaScript,一个 <form>标签是不必要的,但它可能是一个想法,保持它无论如何,以防浏览器需要做任何事情,或访问它作为一种类。

简而言之,如果您正在执行纯 AJAX,则不需要使用 <form>,但是如果您突然决定在将来创建备用代码,那么将它保留在 <form>中可能是一个好主意。

在我看来: 如果你是出于语义上的原因使用它,那么就按照你的意图使用它。Action 属性必须是格式良好的(也可以保持为空) ,还可以通过设置 action 属性并在 ajax 调用之前读取它,将 URI-s 从 js 逻辑中分离出来。

AJAX 很棒,但正如 JamWaffles (+ 1对他)所说,使用 form标签提供了一种备用方法。

就我个人而言,我使用表单标签,甚至对于我用 AJAX 提交的内容也是如此,因为它在语法上非常清晰,并且可以很容易地获取特定表单中的所有输入。是的,你也可以使用 div或者其他什么,但是正如我所说的,使用表单在语法上是很好的。

顺便说一句,屏幕阅读器对待 form中的内容是不同的,因此无论您选择哪种方式,都会考虑到可访问性问题。需要注意的是,轶事证据表明,谷歌在其排名中考虑了可访问性,因此,如果搜索引擎优化是你关心的问题,使用一个表单,并正确地进行。

如果你不需要渐进增强,理论上你就不需要它们。

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

例如,如果你想提交一些用户输入,说: “让我们获取这个表单中的所有元素并提交它们”总是比说“让我们获取这个输入,这两个选择和这三个文本区域并提交它们”更容易。根据我的经验,如果 form标记存在,它实际上对开发人员有帮助。

There is at least one important user-experience feature provided specifically by wrapping inputs inside a form tag:

输入键将提交表单。事实上,在 Mobile Safari 中,这就是你如何得到 “走”按钮 出现在键盘上的方法。

Without a form wrapping the inputs, there is nothing to submit.

当然,您可以通过按键事件提供输入键行为,但我不知道这是否适用于移动设备。我不知道你是怎么想的,但是我宁愿使用浏览器提供的语义,而不是用事件来模仿它们。

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

您可以简单地提供 action=""(意思是“自我”) ,并且 method不是必需的,它默认为 GET

Summary: 表单对于 MVC 来说还可以,简单的网络应用程序,对于面向组件的应用程序来说很糟糕,丰富的网络应用程序。

理由: forms cannot nest other forms: big limitation for a component-oriented architecture.

详情: 对于典型的 MVC 应用程序,表单非常好。在使用大量 javascript 和 AJAX 以及到处有大量组件的丰富、复杂的 Web 应用程序中,我不喜欢表单。原因: 表单不能嵌套其他表单。然后,如果每个组件呈现一个表单,则组件不能相互嵌套。真可惜。通过将所有表单更改为 div,我可以嵌套它们,并且每当我想获取所有参数以便将它们传递给 ajax 时,我只需要这样做(使用 jQuery) :

$(“ # id _ of _ my _ div”) . find (“[ name ]”) . Series alize () ;

(或其他一些过滤)

而不是:

$(“ # id _ of _ my _ form”) . seralize () ;

不过,出于情感和语义方面的原因,当 div 作为形式时,我一直给它们命名为 something _ form。