为虚假查询字符串加载网页

Question

我什至不知道如何表达这个问题的标题，但希望下面的描述能解释我的问题。

我有一个 Web 应用程序，它由一个带有搜索字段的裸搜索页面组成。搜索实际上是由客户端浏览器执行的，结果是通过 ajax 加载的。换句话说，服务器只提供http://server/index.html 的裸搜索页面

执行查询后，我使用history.pushState() 将浏览器地址栏中的URI 更改为更合理的名称，例如http://server/index.html?q=searchterm&page=1&size=10。分页由prev 和next 链接执行，这些链接也通过ajax 以及适当增加或减少的page 和size 值进行调用。一切都很好。

但是，我希望我的应用程序成为一个优秀的网络公民，并且可以添加书签。也就是说，如果有人直接在浏览器地址栏中输入http://server/index.html?q=searchterm&page=1&size=10，我想正确加载结果。除非我将该 URI 发送到服务器，除非我实现一些服务器端处理，否则服务器会发出嘶哑的声音。而且，这是我不想做的事情，因为这将完全改变我的应用程序的复杂性。 除非我可以用普通的香草nginx（我的网络服务器）来做到这一点。换句话说，我不想实现任何服务器端脚本，除了可以使用 Web 服务器本身完成的操作，例如 SSI。

那么，我该如何解决这个问题呢？

Answer 1

嗨，您尝试做的确切术语是“客户端路由”。它涉及使用 history.pushState() [您已经在做] 和服务器端配置设置来操作浏览器历史记录的组合

• .htaccess 如果您使用的是 apache

• 如果你使用的是 nginx，配置文件。

服务器端设置将使您的 Web 服务器成为您的基础 index.html，无论浏览器发出什么请求 (http://server/index.html?q=searchterm&page=1&size=10)，一旦加载到客户端，您必须在窗口地址栏中获取查询字符串并进行相应处理（使一个ajax请求）。

当搜索引擎使用 URL 抓取您的网站时，此实现会产生影响，但这不在此问题的范围内。

这个SO question会给你一个开始

Answer 2

实际上，我认为这比我想象的要容易得多。当我将浏览器发送到http://server/index.html?q=searchterm&page=1&size=10 时，它不会抱怨。它只是发回http://server/index.html。那么我只需使用js 提取查询字符串并执行我的ajax 位即可。这应该可以。