java AJAX 与表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13293375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AJAX vs Form Submission
提问by Vardan Gupta
We pull data from server and for that If we are using Struts, then we can pull either by submitting a page which MVC Architectureor we cam make an AJAX callbut conventions is of using forms and render response but we also face challenges to give rich user experience, so we compromise convention and start using excessive AJAX, so how we should make balance between two?
我们从服务器拉取数据如果我们使用 Struts，那么我们可以通过提交一个页面来拉取MVC 架构，或者我们可以进行AJAX 调用，但约定是使用表单和渲染响应，但我们也面临着提供丰富的挑战用户体验，所以我们妥协了约定并开始使用过多的AJAX，那么我们应该如何在两者之间取得平衡？
回答by Snowy Coder Girl
I personally think that AJAX should be used for displays updates and form submissions should be done via a page reload. Reasoning?
我个人认为 AJAX 应该用于显示更新和表单提交应该通过页面重新加载来完成。推理？
When submitting forms, you are telling the application to do something. Users tend to want to feel that it was done. When a page doesn't reload, users are often left wondering "Did that work?". Then they have to check to make sure what they did was right.
提交表单时，您是在告诉应用程序执行某些操作。用户往往想要感觉它已经完成。当页面没有重新加载时，用户通常会想知道“那行得通吗？”。然后他们必须检查以确保他们所做的是正确的。
On the other hand, when you are displaying a chart or something, and the user says to "display 2011 data....now 2012 data" for instance, they aren't "doing" something (creating new entities, sending emails, etc). So AJAX can provide a nice user interface in this case. Page reloads would be annoying here.
另一方面，当您显示图表或其他内容时，例如，当用户说“显示 2011 年数据......现在是 2012 年数据”时，他们并没有“做”某事（创建新实体、发送电子邮件、等等）。所以在这种情况下，AJAX 可以提供一个很好的用户界面。页面重新加载在这里会很烦人。
In conclusion, I think form submission should be done via page reloads (let the user see it working), whereas display updates should use AJAX (prevent annoying page reloads).
总之，我认为表单提交应该通过页面重新加载（让用户看到它工作）来完成，而显示更新应该使用 AJAX（防止烦人的页面重新加载）。
Of course, this is a preference thing. Some of my company's applications use AJAX all over. But those are the applications that are the most difficult to maintain and debug. ;)
当然，这是一个偏好的东西。我公司的一些应用程序全部使用 AJAX。但这些是最难维护和调试的应用程序。;)
回答by Vardan Gupta
Regular old HTML form submission and fancy ajax forms are not mutually exclusive.
常规的旧 HTML 表单提交和花哨的 ajax 表单并不相互排斥。
First, make the plain HTML form work correctly. Then, add javascript to hiHyman the form and send an ajax request.
首先，使纯 HTML 表单正常工作。然后，添加javascript来劫持表单并发送ajax请求。
The controller and model don't care if the user's browser supports (or has enabled) javascript. The rendered view is decided by whether the call was made with javascript or a simple form submission. This is one of the strengths of the MVC pattern, not a constraint.
控制器和模型不关心用户的浏览器是否支持（或已启用）javascript。呈现的视图由调用是使用 javascript 还是简单的表单提交来决定。这是 MVC 模式的优势之一，而不是约束。
回答by Th0rndike
I think that the choice between the two is somewhat intrinsic:
我认为两者之间的选择有些内在：
a form submission is synchronous and it reloads the page.
an ajax call is asynchronous and it does not reload the page.
表单提交是同步的，它会重新加载页面。
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.
如果某个动作会改变很多 UI 元素或需要轮询大量要呈现的数据，我会选择表单提交。另一方面，如果某个动作用于简单的动作，例如填充选择框或改善用户体验，那么我会选择 AJAX 调用。
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.
没有什么可以避免您根据需要使用尽可能多的 ajax 调用或表单提交，所以最终取决于您。
回答by Roman C
If you have errors between submissions of data the only forms method you could check on the server. On the other hand if you make Ajax calls you could check that errors on the client side. So, out of this different technologies of transmitting data we could follow a decision that they serve different purposes.
如果您在提交数据之间出现错误，您可以在服务器上检查唯一的表单方法。另一方面，如果您进行 Ajax 调用，您可以检查客户端的错误。因此，在这些不同的数据传输技术中，我们可以做出一个决定，即它们服务于不同的目的。
回答by cssyphus
In this day and age, there is virtually no case to use the default HTML form submission method (other than pure nostalgia, or perhaps ignorance).
在这个时代，几乎没有情况使用默认的 HTML 表单提交方法（除了纯粹的怀旧，或者可能是无知）。
No matter what happens, you have more control over the entire process, in a more condensed code base, using AJAX. But more importantly, we just don't do things that way anymore.
无论发生什么，您都可以使用 AJAX 在更精简的代码库中更好地控制整个过程。但更重要的是，我们不再那样做事了。
Consider:
考虑：
When an HTML form submits (old style): (a) it gathers the form field name=attribute values (these become the defacto variable names)(b) together with user-entered data in the form fields (which become the variable values), and posts these data-pairs to a PHP file.
当 HTML 表单提交时（旧样式）：（a）它收集表单字段name=属性值（这些成为事实上的变量名称）（b）连同用户在表单字段中输入的数据（成为变量值），以及将这些数据对发布到 PHP 文件中。
Exactly the same process can easily be programmed using javascript/jQuery.
使用 javascript/jQuery 可以轻松地编写完全相同的过程。
HOWEVER, with the old-style HTML form submission, the page changes - so if you want to do field validation you use javascript/jQuery to cut into the submit process, thus:
但是，使用旧样式的 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
}
});
in which case you already are using most of the AJAX construct that would replace the HTML form submission process.
在这种情况下，您已经在使用大部分 AJAX 构造来替代 HTML 表单提交过程。
This simple introductionto AJAX provides some compelling reasons to use AJAX instead of the old-style HTML Form Submission process:
这个对 AJAX 的简单介绍提供了一些使用 AJAX 代替旧式 HTML 表单提交流程的令人信服的理由：
AJAX is a developer's dream, because you can:
Update a web page without reloading the page
Request data from a server - after the page has loaded
Receive data from a server - after the page has loaded
Send data to a server - in the background
AJAX 是开发人员的梦想，因为您可以：
更新网页而不重新加载页面
从服务器请求数据 - 页面加载
后 从服务器接收数据 - 页面加载后
将数据发送到服务器 - 在后台
Note that you can write ajax code in pure javascript, but it is considerably simpler (much less typing, more consistent) to use the jQuery (javascript) library. Hence, all examples above use jQuery. To include jQuery in your project, it is only necessary to include a reference to the jQuery library:
请注意，您可以使用纯 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, created a simple jQuery tutorialthat is worth stepping through (IMPORTANT: Use Down Arrow to step through the pages)
StackOverflow 行家Schabse Laks创建了一个简单的 jQuery 教程，值得一试（重要：使用向下箭头单步浏览页面）
