javascript - 既然有了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

首先，<form> element 早于 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 header ，可以使用更多 HTTP 动词(不仅 post 和 get )，正如您提到的可以是异步的，并且它们还具有极大扩展的事件范围你可以使用react。

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