问题 像URL方案一样的Gmail


我正在制定一个票务系统,具有以下要求:
主页分为两个部分:
秒-1。这里显示了一些过滤器选项。(如封闭票,开票,所有票,门票分配给我等)。您可以选择一个或多个这些过滤器。
秒-2。这里将显示满足上述过滤器的门票列表。

现在这就是我想要的:当我改变过滤器时
- >更改应反映在URL中,以便能够为其添加书签。
- > ajax请求将进入,并且将在sec-2中更新满足所选过滤器的票证列表。

我希望使用相同的代码以两种方式加载票证 -
(a)选择那组过滤器和
(b)使用书签重新加载页面。

我对如何做到这一点一无所知:
该URL将包含所选的过滤器。(在#之后追加)
更改页面上的过滤器将修改URL的哈希部分并调用一个函数(例如ajaxHandler())来解析URL以获取过滤器,然后发出ajax请求以获取要在section2中显示的票证列表。

我将在window.onload中调用相同的函数ajaxHandler()。

我觉得这是什么 雅虎地图 确实。

实现此类URL方案的最佳方法是什么?
我是朝着正确的方向前进的吗?


10286
2018-04-09 10:28


起源

Gmail就是这样一种服务。还有其他例子吗? - Varun


答案:


是的 - 你正朝着正确的方向前进,并且在所有浏览器和操作系统上都有大量的工作正确地完成了这项工作。最难实现的部分之一是,当您使用#urlfragment语法时,启用浏览器的后退和前进按钮才能正常工作。

一个为这样的东西提供支持的库: http://developer.yahoo.com/yui/history/


7
2018-04-12 04:41



我在用 asual.com/jquery/address 和它作为一个魅力:) - Varun


我发现google wave应用程序的解决方案非常优雅。它基本上是你用可解析的url片段描述的。像这样: HTTP://some.domain/some/url/#filters(过滤器1:KEY1,过滤器2:KEY2); someOtherfragment; andAnotherFragment


2
2018-04-12 04:43





好吧,如果你使用jQuery,这个可爱的图书馆由Asual: jQuery地址 用于深层链接。他们有一个很好的API参考和示例。它将为您提供实施应用程序所需的所有工具。


2
2018-04-16 16:27



我现在正在使用这个。谢谢。 - Varun


这有点是一个简单的答案,但你想要看的是为AJAX使用隐藏的iframe方法,而不是XHR(XMLHttpRequest对象)。这将允许浏览器维护历史记录,因此您的后退按钮将继续工作。

多一点: http://ajaxpatterns.org/IFrame_Call


1
2018-04-12 04:50





本阿尔曼 为此调用构建了一个功能齐全的jQuery插件 BBQ。 IMO,它比Address插件要好得多。


1
2018-04-18 19:26





使用yui库作为历史记录是sblom评论中提到的一个选项。 您可能需要考虑在页面上提供书签或链接按钮,如果您不想处理跨浏览器兼容性问题,用户可以单击该按钮以访问urk。

我们在这里做 http://connect.garmin.com/explore#sortField=relevance&currentPage=1 地图顶部有一个链接。


0
2018-04-12 04:45





在Chrome,Safari和Firefox中,您可以使用HTML5 history.pushState 和 history.replaceState() 方法

一些文件 这里 和 这里


0
2018-04-18 13:22