为什么我们需要<form/>当我们有AJAX的时候

Why do we need <form/> when we have AJAX?

本文关键字：我们有 AJAX form 我们 为什么      更新时间：2023-09-26

我刚开始学习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仍然在使用并且很流行，我想它肯定有一些我不知道的优点。

首先， <form>元素比Ajax调用早几年。Ajax调用(如果你叫它们XMLHttpRequest就更好了)是Internet Explorer中增加的一个功能，它可以从JavaScript加载/发布数据。

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

除了需要使用JavaScript发出XMLHttpRequest调用(JavaScript并不总是可用)之外，还有功能和语义上的差异:

  • HTML表单在语义上对输入元素进行分组(否则，如何进行分组你知道哪些输入元素属于一起吗?)
  • 它们支持一些功能比如文件上传直到最近才被支持JavaScript(你不能在文件上传中读取文件内容)字段)
  • 表单知道如何序列化输入字段 (JavaScript库，如jQuery重新实现了这个逻辑，这是免费的浏览器)
  • 表单不受CORS限制的影响可以发送到任何服务器;而XMLHttpRequest则需要特殊的服务器端配置)
  • 表单具有内置的用户界面功能，例如在按enter/return键时提交。
  • Forms可以post不同字符集和编码的数据(通过accept-charset属性)，这是在JavaScript中非常困难(在JavaScript中所有字符串都是Unicode)

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

这两种技术都有自己的位置，这取决于您想要实现什么。

在JavaScript不可用的情况下为用户提供功能。这也意识到，我们通过JavaScript代理的一些动作，如PUT和DELETE，如果没有代理像<input type=hidden name=_method>这样的隐藏输入，就不能使用<form>完成。

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

但是考虑一个表单，它有几个字段:

<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进行填充。

这个答案可能由更有经验的人来解释更好，但我还是要试一试:

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

相关文章：