11

我正在开发票务系统，具有以下要求：
主页分为两个部分：
Sec-1。此处显示了一些过滤器选项。（如已关闭票证、未结票证、全部票证、分配给我的票证等）。您可以选择一个或多个这些过滤器。
第二节。此处将显示满足上述过滤条件的门票列表。

现在这就是我想要的：当我更改过滤器时
——> 更改应该反映在 URL 中，以便可以将其添加为书签。
--> 一个 ajax 请求将会发送，并且满足所选过滤器的工单列表将在 sec-2 中更新。

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

我对如何做到这一点一无所知：
URL 将包含选定的过滤器。（附加在 # 之后）
更改页面上的过滤器将修改 URL 的哈希部分并调用一个函数（比如 ajaxHandler()）将 URL 解析为获取过滤器，然后发出 ajax 请求以获取要在 section2 中显示的工单列表。
我将在 window.onload中
调用相同的函数 ajaxHandler()。
我觉得这就是雅虎地图所做的。

实现这种 URL 方案的最佳方法是什么？
我是否朝着正确的方向前进？

4

7 回答 7

6

是的——你正朝着完全正确的方向前进，并且在所有浏览器和操作系统中正确地做到这一点需要做大量的工作。当您使用#urlfragment 语法时，最难做到的部分之一是使浏览器的后退和前进按钮正常工作。

为此类事物提供支持的库：http: //developer.yahoo.com/yui/history/

于 2010-04-12T04:41:36.580 回答
2

我发现 google wave 应用程序的解决方案非常优雅。这基本上就是您使用可解析的 url 片段所描述的内容。像这样：http://some.domain/some/url/#filters(filter1:key1,filter2:key2);someOtherfragment;andAnotherFragment

于 2010-04-12T04:43:02.343 回答
2

好吧，如果您使用的是 jQuery，那么 Asual 提供了这个可爱的库：用于深度链接的jQuery 地址。他们有很好的 API 参考和示例。它将为您提供实现应用程序所需的所有工具。

于 2010-04-16T16:27:24.783 回答
1

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

更多：http ://ajaxpatterns.org/IFrame_Call

于 2010-04-12T04:50:26.057 回答
1

Ben Alman为此构建了一个功能齐全的 jQuery 插件，称为BBQ。IMO，它比地址插件好得多。

于 2010-04-18T19:26:51.123 回答
0

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

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

于 2010-04-12T04:45:56.953 回答
0

在 Chrome、Safari 和 Firefox 中，您可以使用 HTML5history.pushState和history.replaceState()方法

这里和这里的一些文档。

于 2010-04-18T13:22:14.353 回答