16

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

4

6 回答 6

34

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

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

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

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

当然，这是一种偏好。我公司的一些应用程序完全使用 AJAX。但这些是最难维护和调试的应用程序。;)

于 2012-11-08T16:54:04.950 回答
9

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

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

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

于 2012-11-08T16:41:10.760 回答
7

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

  • 表单提交是同步的，它会重新加载页面。

  • ajax 调用是异步的，它不会重新加载页面。

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

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

于 2012-11-08T16:44:26.403 回答
2

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

于 2012-11-08T16:36:41.523 回答
2

在这个时代，几乎没有使用旧标准 HTML 表单提交方法的情况（除了纯粹的怀旧，或者可能不知道）。

<form>如果您想利用.serialize()函数（它将表单中的所有名称-数据对抓取到查询字符串中） ，标签本身仍然很有用，但除此之外，我们不需要<form>在这些天。

使用 AJAX，开发人员可以在更精简的代码库中更好地控制整个过程。但更重要的是，我们不再那样做事了。

考虑：

（旧样式 - 表单）当 HTML 表单提交时：（a）它收集表单字段name=属性值（这些成为事实上的变量名称）（b）连同用户在表单字段中输入的数据（成为变量值） , 并将这些数据对发布到 PHP 文件（在action=form 标签的属性中指定）。然后，该页面更改为另一个页面，导致屏幕明显刷新并丢失所有先前输入的用户数据。即使使用技巧action=""，其中表单数据被回发到它开始的同一页面，页面仍然被重置/刷新。

（新样式）完全相同的过程可以很容易地使用 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
    }
});

在这种情况下，您已经在使用大部分将替换 HTML 表单提交过程的 AJAX 构造。

这个对 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 maven, Schabse Laks , 创建了一个简单的 jQuery 教程，值得单步执行（重要提示：使用向下箭头单步浏览页面）

于 2019-02-19T00:11:04.053 回答
0

使用 AJAX 发送表单时，您会生成 POST 请求而不是浏览器，因此您可以更好地控制它。即使您一开始就不需要这种控制，但随着时间的推移，它可能会变得有必要。

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

于 2020-11-11T17:48:16.247 回答