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

What is the difference between attaching a listener to a button to send form data with AJAX and using a standard HTML form?

本文关键字：表单 数据 标准 区别 什么 HTML AJAX 侦听器 按钮      更新时间：2023-09-26

也就是说，这两种方法有什么区别：

  1. 阿贾克斯

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

  1. .HTML

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

有什么收获？是否只是选项 1 将提交表单而无需刷新页面，而选项 2 将

？

是的，方法 nr 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>

实际上没有问题。当然，对于 AJAX 请求，您可以发送额外的标头（以便服务器可以识别它是 AJAX 请求）。许多JavaScript框架，如jQuery，总是为此目的添加X-Requested-With: XMLHttpRequest。此外，由于同源政策，您不能只发布到另一个域。除此之外，它基本上是一样的。

一个小问题：如果 JavaScript 被禁用，或者出现错误（可能是因为您使用了特定浏览器不支持的功能），处理程序将不起作用。

表单的一个陷阱，它将始终加载一个全新的页面，而使用 AJAX，您只需发布表单并显示一个小响应而无需重新加载页面。

我认为最好的方法是将它们结合起来。让你的表单像普通的HTML表单一样工作，并添加一层JavaScript/AJAX，这不是使其工作所必需的，但增加了更好的用户体验。

相关文章：