AJAX与表单提交

问题描述 投票:13回答:5

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

java ajax struts form-submit
5个回答
25
投票

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

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

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

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

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


8
投票

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

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

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


5
投票

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

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

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

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


2
投票

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


0
投票

在这个时代,几乎没有使用默认的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
    }
});

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

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 maven,Schabse Laks,创建了一个值得单步执行的simple jQuery tutorial(重要提示:使用向下箭头逐步浏览页面)

© www.soinside.com 2019 - 2024. All rights reserved.