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

首先， <form>元素早于Ajax调用数年。 Ajax调用（如果你称之为XMLHttpRequest则更好）是Internet Explorer中的一个附加功能，可以从JavaScript加载/发布数据。

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

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

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

XMLHttpRequest当然可以做表单不能的事情，例如设置HTTP标头，可以使用更多的HTTP动词（不仅是post和get），如你所提到的那样是异步的，他们还有一个可以做出反应的大范围的事件。

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

Answer 2

当JavaScript不可用时，可以为用户提供功能。这也意识到我们使用PUT和DELETE等代理的代理操作无法使用<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的一部分，它创建了对服务器的动态调用（异步调用更具体）。这些可能今天更为人所知，但在它与行动形成之前是解决该用例的方法。

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

4 个答案: