JQuery Address 管理应用程序状态的简单示例

Question

我正在使用 jQuery Address 库根据用户在页面中执行的操作来重写我的 URL。目的是允许用户为页面添加书签并稍后返回。该页面永远不会刷新，因为所有服务器交互都是通过 ajax 完成的。

jQuery Address 的 URL 写法如下：

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

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

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

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

有谁知道我如何正确定义路由或获取 jQuery 地址而不写“#”。

编辑：“#”不会发送到服务器。哎哟！好的，问题已修改。

Answer 1

不会。# 及其后的 URL 部分不会发送到服务器。因此，您在服务器上的 Play 应用程序永远不会看到此类 URL。

HTML5 解决方案

您需要使用 JavaScript 在客户端处理这些 URL。在具有良好 HTML5 支持的现代浏览器中，您可以修改地址而无需重新加载页面。请参阅操作浏览器历史记录了解如何针对这些浏览器执行此操作。请参阅何时可以使用...以获得浏览器支持。

#-URL

在 Internet Explorer 和其他浏览器的旧版本上，您需要使用 # URL 并使用 JavaScript 来加载状态（例如，获取用户页面 /u/scott_tiger你的例子）。请参阅如何操作当用户使用 JQuery 访问哈希链接 (#something) 时运行 JavaScript 函数？了解如何在 JavaScript 中执行此操作。此外，如果用户使用 #-URL 将页面添加为书签，则您需要重新加载状态。

另请参阅：什么是 shebang/hashbang (# !) 在 Facebook 和新的 Twitter URL 中？

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
});