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

【问题标题】：Why do we need <form/> when we have AJAX?为什么我们有 AJAX 时还需要 <form/>？
【发布时间】：2015-08-30 01:16:34
【问题描述】：

我刚开始学习 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 的一个优点是它可以是异步的，我发现它真的很不错，因为您仍然可以在等待服务器响应的同时做其他事情，并且可能保留当前页面并且不会丢失您的输入。（当我提交表单时，我必须将所有输入传输到服务器并再次返回到界面，然后丢失它们。

由于现在形式还在使用和流行，我想它有一些我不知道的优点。

【问题讨论】：

<form> 不仅具有表单的功能，还具有语义，因为 HTML 是一种语义语言。 form 比嵌套在许多其他 divs 中的 div 更好。
我将在访问您的网站时禁用所有 JS。那又如何？没有甜蜜的ajax
<form> 用于在将用户输入提交到服务器之前验证客户端上的用户输入。在form 向服务器提交数据之前，更好地利用资源来确保所有字段都正确
@Bsienn 很公平，但这样做，我敢打赌你会发现 Ajax 不工作是你最不关心的问题......\
@SuperVeetz 验证输入与使用 ajax 和使用 form 元素一样容易

标签： javascript jquery ajax forms

【解决方案1】：

首先，<form> 元素早于 Ajax 调用多年。 Ajax 调用（最好叫它们XMLHttpRequest）是 Internet Explorer 中的一个新增功能，可以从 JavaScript 加载/发布数据。

也许最重要的是，如果您停止支持<form> 元素或 XMLHttpRequest，您将基本上破坏所有现有网站。

除了需要使用 JavaScript 来发出 XMLHttpRequest 调用的要求（JavaScript 并不总是可用）之外，还存在功能和语义上的差异：

HTML 表单在语义上对输入元素进行分组（否则，如何你知道哪些输入元素属于一起吗？）
它们支持某些功能像 文件上传 直到最近才被支持完全 JavaScript（您无法在文件上传中读取文件的内容字段）
表单知道如何序列化输入字段（像 jQuery 这样的 JavaScript 库重新实现了浏览器免费提供的这个逻辑）
表单不受CORS restrictions的影响（即它们可以发布到任何服务器；而XMLHttpRequest 需要特殊的服务器端配置）
表单具有内置用户界面功能，例如在按 Enter/Return 键时提交。
表单可以以不同的字符集和编码发布数据（通过accept-charset 属性），即在 JavaScript 中很难做到（在 JavaScript 中所有字符串都是 Unicode）

XMLHttpRequest当然可以做表单不能做的事情，例如设置HTTP标头，可以使用更多的HTTP动词（不仅post和get），正如你提到的可以是异步的，它们也有您可以响应的事件范围大大扩展。

这两种技术各有所长，具体取决于您想要实现的目标。

【讨论】：

【解决方案2】：

当 JavaScript 不可用时，会为用户提供功能。这也意识到我们在 JavaScript 上代理的某些操作，如 PUT 和 DELETE，如果不代理像 <input type=hidden name=_method> 这样的隐藏输入，则无法使用 <form> 完成。

【讨论】：

【解决方案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。

【讨论】：

你总是可以做到$( "#test" ).wrap( "<form></form>" ).parent().serialize()
@DelightedD0D 这对我来说只是一个丑陋的黑客
好的，考虑$('#myForm').append(someImputElement); $('#myForm').submit(); 我的意思只是为了说明“动态数据填充”在这个意义上并不是ajax的真正优势，您可以通过多种方式将字段添加到表单中，有或没有ajax，反之亦然。如果有的话，您的回答证明了将 ajax 和表单结合使用的优势。

【解决方案4】：

有更多经验的人可能会更好地解释这个答案，但我会试一试：

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

【讨论】：

+1 绝对是这个。表单先于 AJAX 之类的东西，并且是事实上的将客户端响应从网页发送回服务器的方式。