AJAX与表单提交

Var*_*pta 13 java ajax struts form-submit

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

Sno*_*irl 27

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

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

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

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

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

  • 你可能想重新考虑一下你对ajax的看法.您是否真的希望在您投票或对SO发表评论时重新加载页面?做得对的ajax很干净,优雅地降级.(此外,这是一个过时的方面,但仍然很重要,特别是对于移动设备:ajax可以节省带宽.) (26认同)
  • 我同意.我正在谈论更多"表单提交",如填写表格.如果你的变化不大,我同意使用AJAX.我想更多"将所有这些数据添加到数据库"等 (4认同)

小智 8

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

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

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


Th0*_*ike 6

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

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

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

If a certain action will change a lot of UI elements or needs to poll a lot of data to be rendered, I would go with form submission. On the other hand, if a certain action is used for simple actions, like populating a select box or improving user experience, then I would go for an AJAX call.

There is nothing avoiding you to use as many ajax calls or form submissions as you need, so in the end is up to you.


css*_*hus 5

在当今时代,几乎没有使用旧标准 HTML 表单提交方法的情况(除了纯粹的怀旧,或者也许不知道)

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

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

考虑:

(旧样式 - 表单)当 HTML 表单提交时: (a) 它收集表单字段name=属性值(这些成为事实上的变量名称) (b) 以及用户在表单字段中输入的数据(这些成为变量值),并将这些数据对发布到 PHP 文件(如action=表单标记上的属性中指定)。然后,该页面更改为另一个页面,导致屏幕明显刷新并丢失所有先前输入的用户数据。即使使用技巧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
    }
});
Run Code Online (Sandbox Code Playgroud)

在这种情况下,您已经在使用大部分 AJAX 构造来取代 HTML 表单提交过程。

这个对 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>
Run Code Online (Sandbox Code Playgroud)

StackOverflow maven Schabse Laks创建了一个简单的 jQuery 教程,值得逐步浏览(重要:使用向下箭头逐步浏览页面)