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

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

您正在尝试做的确切术语是＆＃34;客户端路由＆＃34;。它涉及使用history.pushState（）[你已经在做的]和服务器端配置设置来操纵浏览器历史记录

• .htaccess如果您使用的是apache

如果您使用的是nginx，请

• 配置文件。

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

当搜索引擎使用网址抓取您的网站但这不属于此问题的范围时，此实施会产生影响。

这个SO question会给你一个开始

Answer 2

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