Question

我们从服务器提取数据并为此如果我们使用Struts，那么我们可以通过提交 MVC架构的页面或者我们进行 AJAX调用来提取但惯例是使用表单和呈现响应，但我们也面临着提供丰富用户体验的挑战，所以我们妥协约定并开始使用过多的AJAX，那么我们应该如何在两者之间取得平衡呢？

Answer 1

我个人认为AJAX应该用于显示更新，表单提交应该通过页面重新加载来完成。推理？

提交表单时，您告诉应用程序要做某事。用户往往希望感觉它已经完成。当页面没有重新加载时，用户常常想知道“这有用吗？”。然后他们必须检查以确保他们所做的是对的。

另一方面，当您显示图表或其他内容，并且用户说“显示2011年数据....现在2012年数据”时，他们并没有“做”某事（创建新实体，发送电子邮件等）。因此，在这种情况下，AJAX可以提供一个很好的用户界面。页面重新加载会让人讨厌。

总之，我认为表单提交应该通过页面重新加载来完成（让用户看到它正常工作），而显示更新应该使用AJAX（防止恼人的页面重新加载）。

当然，这是一个偏好的事情。我公司的一些应用程序全部使用AJAX。但那些是最难维护和调试的应用程序。 ;）

Answer 2

常规的旧HTML表单提交和花哨的ajax表单并不相互排斥。

首先，使纯HTML表单正常工作。然后，添加javascript以劫持表单并发送ajax请求。

如果用户的浏览器支持（或已启用）javascript，则控制器和模型不关心。渲染视图取决于调用是使用javascript还是简单表单提交。这是MVC模式的优势之一，而不是约束。

Answer 3

我认为两者之间的选择有点内在：

表单提交是同步的，它会重新加载页面。
ajax调用是异步的，不会重新加载页面。

如果某个动作会改变很多UI元素或需要轮询大量要呈现的数据，我会选择表单提交。另一方面，如果某个动作用于简单的操作，比如填充选择框或改善用户体验，那么我会去AJAX调用。

没有什么可以避免你根据需要使用尽可能多的ajax调用或表单提交，所以最终由你决定。

Answer 4

如果您提交的数据之间存在错误，则可以在服务器上查看唯一的表单方法。另一方面，如果您进行Ajax调用，则可以在客户端检查错误。因此，在这种传输数据的不同技术中，我们可以遵循它们用于不同目的的决策。

Answer 5

在当今时代，几乎没有任何情况可以使用默认的HTML表单提交方法（纯怀旧或无知除外）。

无论发生什么情况，您都可以使用AJAX在更精简的代码库中对整个过程进行更多控制。但更重要的是， 我们只是不再这样做。

考虑：

当提交HTML表单（旧样式）时：（a）它收集表单字段name=属性值（它们成为事实上的变量名称）（b）以及用户-在表单字段（成为变量值）中输入数据，并将这些数据对发布到PHP文件中。

完全相同的过程can easily be programmed using javascript/jQuery。

但是，使用旧式HTML表单提交时，页面会发生变化-因此，如果您要进行字段验证，则可以使用javascript / jQuery进入提交过程，因此：

$('myform#btnSubmit').click(function(){
    var some_fields_failed = false;
    //check form field values here, set: some_fields_failed = true
    if (some_fields_failed){
       return false; //halts the HTML Form Submit process and returns control to the user
    }
});

在这种情况下，您已经在使用大多数AJAX构造来代替HTML表单提交过程。

This simple introduction使用AJAX提供了一些令人信服的理由来使用AJAX而不是旧式的HTML表单提交过程：

AJAX是开发人员的梦想，因为您可以：

更新网页而无需重新加载页面
  从服务器请求数据-页面加载后
  从服务器接收数据-页面加载后
  将数据发送到服务器-在后台

请注意，您可以用纯javascript编写ajax代码，但是使用jQuery（javascript）库要简单得多（键入更少，更一致）。因此，以上所有示例均使用jQuery。 要将jQuery包含在您的项目中，只需包含对jQuery库的引用：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>

StackOverflow专家Schabse Laks创建了一个simple jQuery tutorial，值得一游（<重要>：使用向下箭头浏览页面）

Answer 6

使用AJAX发送表单时，您将生成POST请求而不是浏览器，因此您可以对其进行更多控制。即使您不需要该控件开始，也可能会及时发现它。

一种情况是防止CSRF攻击表单。可以通过添加包含CSRF令牌的隐藏表单输入字段来实现它，该字段与表单数据一起发送。但是首选的实现方式是在提交的POST请求中添加自定义标头。但是，在使用旧的表单提交方法时，您将无法执行后者-浏览器将撰写请求，并且您无法添加自己的标题。

AJAX与表单提交

6 个答案: