javascript - 将监听器附加到按钮以使用 AJAX 发送表单数据与使用标准 HTML 表单有什么区别？

Question

也就是说，这两种方法之间有什么区别:

1. AJAX

我有一些随机输入字段，这些字段不一定位于表单容器 (HTML) 中。在我的 JS 文件中，我有一个按钮的监听器(不一定以任何方式附加或与输入字段相关)，该按钮使用 jquery 提取值并使用 $.post(url, postParams, callback(...) {.. .});发布数据。

HTML

我将所有输入字段放在表单标记的上下文中，并添加一个提交输入，其操作指向相应的路由(这对应于上面 AJAX/jquery 方法中的 url)。

有什么问题吗？是不是只是选项 1 会提交表单而无需刷新页面，而选项 2 则可以？

Answer 1

是的，方法 1 基本上允许您在不刷新整个页面的情况下提交表单。

最好使用“渐进增强”将两者结合起来。这基本上意味着您从最基本的方法开始，以确保它能够全面发挥作用，然后您可以增加一些趣味 - 那些有能力的人将获得更好的用户体验。

以此为例:

<form action="somescript.aspx" method="post" class="ajax">
<label for="something">Something</label>
<input type="text" name="something" id="something" />
<input type="submit" value="Submit form" />
</form>

这是一个非常基本的标准 HTML 表单，适用于所有设备，每个人都应该能够成功使用它，使用辅助技术等等。

然后添加这个简单的 JS 脚本，它会“劫持”表单的默认功能，并为那些拥有 JS 的用户添加 AJAX:

<script>
  $('form.ajax').submit(function() {
      var form = $(this);
      $.post(form.attr('action'), form.serialize(), function(result) {
          // Do something with the response
      });
      return false;
  });
</script>