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

时间:2014-11-13 08:26:50

标签: java jquery ajax twitter-bootstrap

该应用程序是在第1页客户填写信息的地方运送物品。然后在第二页,他有不同的费率选项可供选择。然后在第3页,他需要填写地址信息。然后在第4页付款信息&等等。

现在让我们说客户在第一页输入详细信息。我发送ajax请求到服务器&获得不同的价格选择。 一旦我回到ajax成功,我需要将页面更改为第二个jsp。一旦客户选择了费率选项,然后再次提出ajax请求&得到第三个jsp&等等。

我需要实现代码的UI端,而无需重新加载或重定向页面。也来自2nd&第三个jsps我应该有一个后退按钮去上一页。

是否可以只使用jquery来设置/替换div,或者是否有任何插件可以像twitter bootstrap carousel一样使用?

我需要在ajax成功功能方面提供一些帮助,以便我可以使用提交&amp ;;进入next或prev jsps后退按钮? 我正在使用spring MVC框架。

1 个答案:

答案 0 :(得分:2)

我认为你对谁做了什么有点困惑:你正在混合使用jsp和ajax,服务器端计算和客户端。

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

客户在第一页上输入详细信息,在提交时,会发生ajax调用。如上所述,调用的响应将是json或html将绑定到您的文档,所以现在您可以显示新数据并隐藏旧数据,使用bootstrap轮播正常...等等其他页面。

对于后退按钮,如果您只使用html5浏览器,则应该操纵浏览器历史记录(https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history),否则您应该使用像history.js(https://github.com/browserstate/history.js/)这样的polyfill

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