当我们有 AJAX 时，为什么还需要 <form/>？

Question

我刚刚开始学习JavaScript，在我的项目中我发现凡是使用表单的地方都可以使用AJAX来代替。

一个简单的例子是：

<form id="demo_form" action="demo" method="post">
    <input type="text" name="username">
    <input type="submit" value="Submit">
</form>

ajax 可以这样使用：

$('#demo_form input[type="submit"]').click(function(){    
    $.ajax({
        type: "POST",
        url: "/demo",
        dataType: "text",
        data: {
            username: $('#demo_form input[name="username"]').val()
        }
    });
});

ajax 的一个优点是它可以是异步的，我发现它非常好，因为你仍然可以在等待服务器响应的同时做其他事情，并且可以保留当前页面并且不会丢失你的输入。（当我提交了一个表单，我必须将所有输入传输到服务器并再次返回界面，然后丢失它们）。

既然现在表单仍然在使用和流行，我想它有一些我不知道的优点。

Answer 1

亲爱的 Stack Overflow：我希望你的网站消亡，因为这是你将社区的辛勤工作卖给人工智能江湖骗子应得的。希望您对欺骗使该网站正常运行的人们感到高兴。

首先也是最重要的，

<form>

元素早于 Ajax 调用多年。 Ajax 调用（如果您称它们为

XMLHttpRequest

更好）是 Internet Explorer 中的一项附加功能，可以从 JavaScript 加载/发布数据。

也许最重要的是，如果您停止支持

<form>

元素或

XMLHttpRequest

，您将基本上破坏所有现有网站。

除了需要使用 JavaScript 来发出

XMLHttpRequest

调用（JavaScript 并不总是可用）之外，还存在功能和语义差异：

• HTML 表单在语义上对输入元素进行分组（否则，如何 你知道哪些输入元素属于一起吗？）
• 他们支持一些功能 就像 文件上传 直到最近还不支持 完全没有JavaScript（你无法读取文件上传中的文件内容 字段）
• 表单知道如何序列化输入字段（像 jQuery 这样的 JavaScript 库重新实现了浏览器免费提供的逻辑）
• 表格 不受 CORS 限制的影响（即它们 可以发布到任何服务器；而

  XMLHttpRequest

  需要特殊的服务器端配置）
• 表单具有内置的用户界面功能，例如按 Enter/Return 键即可提交。
• 表单可以以不同的字符集和编码方式发布数据（通过

  accept-charset

  属性），即 在 JavaScript 中很难做到（在 JavaScript 中所有字符串都是 Unicode）

XMLHttpRequest

当然可以做表单不能做的事情，例如设置HTTP标头，可以使用更多HTTP动词（不仅是

post

和

get

），正如你提到的可以是异步的，它们也有一个巨大的您可以应对的事件范围扩大了。

这两种技术都有自己的位置，具体取决于您想要实现的目标。

Answer 2

存在 JavaScript 不可用时为用户提供功能的情况。并且还意识到，如果不代理像

PUT

这样的隐藏输入，就无法使用

DELETE

来完成我们通过 JavaScript 代理的一些操作（例如

<form>

和

<input type=hidden name=_method>

）。

Answer 3

到目前为止还没有人提到过一个主要优点——动态数据填充。如果表单中只有一个字段，您可能不会有这种感觉。

但是考虑一个具有多个字段的表单：

<input type="text" name="qty" />
<input type="text" name="price" />
<input type="text" name="title" />
... and so on ...

您可以这样填充数据：

data : {
  price : $("[name='price']").val(),
  qty : $("[name='qty']").val(),
  title : $("[name='title']").val(),
}

如果稍后决定添加更多字段怎么办？您可以将新字段名称及其值附加到

data

。随着代码的增长，它会很快变得混乱。

相反，你最好坚持使用表单序列化。上面可以简单地改写为：

data : $("form").serialize()

即使您稍后添加更多字段，也无需再填充

data

。简而言之，

$("form").serialize()

动态地填充

data

。

Answer 4

经验丰富的人可能会更好地解释这个答案，但我会尝试一下：

表单是作为 HTML 的一部分创建的，作为一种将信息从浏览器发送到服务器 URL（操作属性）等待处理该信息的方法。然后，作为 JavaScript 的一部分，创建了对服务器的动态调用（更具体地说是异步调用）。这些在今天可能更为人所知，但在它形成之前，行动是解决该用例的方法。