如何解析 URL 进行搜索？答案

【问题标题】：How to parse an URL to do a search?如何解析 URL 进行搜索？
【发布时间】：2012-07-18 09:33:53
【问题描述】：

我不确定这是否可以在没有任何服务器的情况下在 javascript 中完成。

基本上，我使用 Google Maps API 在同一页面上生成某些搜索结果，并且我希望能够创建一个共享按钮，以便当用户单击它时，它将生成一个自定义链接，如 www .example.com/?search=阿纳海姆。然后，当用户或其他用户将该 url 键入地址栏中时，它将产生一个包含这些结果的页面。

现在，我只在一个 html 页面上进行搜索，我不确定如何通过输入链接来更改我的一个 html 页面的默认主页位置？或者，这是不可能的，我应该做点别的吗？

任何建议将不胜感激。谢谢！！

编辑：这可能有点难以理解。但基本上，我希望能够生成链接，就像你点击链接按钮时谷歌地图生成链接一样。

【问题讨论】：

标签： javascript

【解决方案1】：

jQuery BBQ (API docs) 是我最喜欢的工具。

只需为hashchange 添加一个事件监听器：

$(window).bind('hashchange', function(e) {
    var q = $.bbq.getState('q');
    if (q) {
        // do your Google Maps search for `q`
    }
});

并在页面首次加载时触发hashchange。（该事件不会在页面加载时自动触发，仅当 URL 发生更改时——无论是通过编程方式还是由用户摆弄 URL）

$(window).trigger('hashchange');

现在打开 example.com/#q=Anaheim 将搜索 Anaheim。

对于奖励积分：我假设您的页面有一个文本框，当用户按下回车键（和/或单击按钮）时调用一个函数。不要直接调用您的搜索函数，而是使用pushState 将搜索词添加到 URL。（您的页面不会重新加载。）这将使它立即成为书签，因为用户可以将页面添加到他们的书签或从浏览器的地址栏中复制 URL。

// on key 13 / search button click:
$.bbq.pushState({ q: $('#searchTerm').val() });

这就是你所需要的。 hashchange 处理程序从那里开始。

【讨论】：

我应该将 pushState 函数放入我的 mapSearch 函数中吗？
假设 mapSearch 是对 Google Maps 实际运行查询的函数，唯一应该调用 mapSearch 的是 hashchange 处理程序。任何会启动搜索的东西（例如按钮）都会使用搜索词调用pushState，然后会触发hashchange。
我试图在我的代码中实现这个，但我得到这个错误：link

【解决方案2】：

您正在寻找的是生成“深度链接”

http://en.wikipedia.org/wiki/Deep_linking

您可以在客户端执行此操作。

我建议使用能够正确解释 url 并产生相同结果的良好 JS 框架。

例如

http://angularjs.org/

http://backbonejs.org/

我没有足够的谷歌地图经验，但是你的 JS 框架应该调用谷歌地图（可能是 AJAX），并生成唯一的 URL

然后可以使用这些唯一的 URL 来回溯到您的应用程序。当您的框架正确解释 URL 时，它们应该对 GoogleMaps 进行相同的 API 调用，这是第一次生成 URL。

【讨论】：