java - 如何使用ajax请求进行多页表单提交

Question

该应用程序用于运送客户在第一页填写信息的元素。然后在第二页上，他可以选择不同的费率选项。然后在第三页他需要填写地址信息。然后在第四页上显示付款信息等。

现在假设客户在第一页输入详细信息。我向服务器发送 ajax 请求并获得不同的费率选项。一旦我成功返回ajax，我需要将页面更改为第二个jsp。一旦客户选择了费率选项，然后再次发出 ajax 请求并获取第 3 个 jsp 等。

我需要实现代码的 UI 端，而无需重新加载或重定向页面。另外，从第二个和第三个jsps中，我应该有一个后退按钮来转到上一页。

是否可以仅使用jquery(例如设置/替换div)或者是否有任何我可以使用的插件(例如twitter bootstrap carousel)？

我需要一些关于 ajax 成功功能的帮助，以便我可以使用提交和后退按钮转到下一个或上一个 jsps？我正在使用 Spring MVC 框架。

Answer 1

我认为您对谁制造什么有点困惑:您正在混合 jsp 和 ajax、服务器端计算和客户端。

不关心jsp或spring。它们与您的需求无关:您将实现一个单页应用程序，因此 jsp 和 spring 将只负责向客户端传递数据，例如以json(要绑定(bind)到模板，请参阅 jsview)或 html(要附加 dom 元素)。

客户在第一页输入详细信息，提交后，会发生 ajax 调用。正如我上面所说，调用的响应将是绑定(bind)到您的文档的 json 或 html，因此现在您可以显示新数据并隐藏旧数据，使用 bootstrap carousel 就可以了...等等其他页面。

对于后退按钮，如果您仅使用 html5 浏览器，您应该操作浏览器历史记录 ( https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history )，如果没有，您应该使用像 History.js 这样的填充 ( https://github.com/browserstate/history.js/ )

此回复只是提供满足您需要的方法的线索。 AngluarJS 或 ember.js 是另一个可用于搜索问题解决方案的关键字。