使用JQuery地址管理应用程序状态的简单示例

Question

我使用jQuery地址库根据用户在页面中所做的事情来重写我的URL。这样做的目的是允许用户将页面添加到书签中，然后再回来。页面永远不会刷新，因为所有服务器交互都是通过ajax完成的。

jQuery地址是写这样的url:

http://localhost: 9000/#/u/scott_tiger

我需要在Play中设置一个路由，以便能够将该请求路由到适当的控制器。所以我设置了这个:

GET     /#/u/{username}                Controller.showUser

这不起作用，路由定义会被忽略。我已经尝试了很多事情，比如试图转义"#"并将其替换为我用Character.toString(35)填充的变量。这些都不行。

有谁知道我如何才能定义路由正确或得到jQuery地址不写"#"。

编辑:"#"没有被发送到服务器。哎!好的，问题修改了。

Answer 1

No。#和URL之后的部分是而不是发送给服务器。所以你在服务器上的play应用永远不会看到这样的url。

<<h3> HTML5解决方案/h3>

您需要在客户端使用JavaScript处理这些url。在具有良好HTML5支持的现代浏览器中，您可以修改地址而无需重新加载页面。请参阅操纵浏览器历史记录了解如何对这些浏览器进行操作。看看我什么时候可以用…浏览器支持。

# url

在Internet Explorer和旧版本的其他浏览器上，你需要使用# url并使用JavaScript来加载状态(例如，在您的示例中获取用户页面/u/scott_tiger)。参见如何运行一个JavaScript函数时，用户正在访问一个哈希链接(#东西)使用JQuery?了解如何在JavaScript中做到这一点。此外，如果用户用# -URL标记页面，则需要重新加载状态。

参见:Facebook和Twitter新url中的shebang/hashbang(#!)是为了什么?

JavaScript库

你可以使用JavaScript库来处理这个问题。history.js就是一个例子。像Backbone.js这样的大框架也可以处理这个问题。

---

有谁知道我怎么能得到jQuery地址不写"#"。

如果你不写# -部分的URL，状态不能被链接。因此，如果您将页面添加为书签，则无法返回例如Scott Tigers个人资料页面，因为URL只有http://localhost:9000/，您将到达首页，而用户虽然他会到达个人资料页面。

Answer 2

有了我对url的新理解(谢谢@Jonas)，我意识到我错过了一半的故事。

我使用JQuery地址来改变URL取决于你在应用程序中单击什么。这在很多浏览器上都很有效。我缺少的是使用JQuery Address来观察外部地址的变化(书签、历史记录、后退/前进)并做出相应的响应。例如，通过触发适当的Ajax调用并适当地呈现该数据来正确地设置页面。

修改地址

$.address.title("new title describing application state");
$.address.parameter("q", "val1");
$.address.parameter("g", "val2");
$.address.update();

恢复状态

$.address.externalChange(function(event) {
    var val1 = event.parameters["q"];
    var val2 = event.parameters["g"];
    // do something with those values
});