我在一个有动画背景的网站上工作,动画由javascript提供,因此当用户输入并提交搜索时,如果在搜索完成并将结果附加到DOM时动画能够顺利继续,那就太好了。
我已经设法将搜索结果从ajax请求返回到JS,尽管ajax请求的url与浏览器中当前显示的url本质上不同。
因此,我的目标是让用户访问网站,例如www.example.com/public/home/search
他们在文本输入中键入一些内容,然后按搜索,url就会变成类似的内容
www.example.com/public/home/search?q=some+search+query or
www.example.com/public/home/search/somesearchquery or
www.example.com/public/home/search/#somesearchquery, etc.
但是页面状态保持不变,结果被附加到DOM,并且不会发生完全重新加载。
返回到类似上面的url应该会加载页面并自动发送查询,返回已经附加了结果的页面。
无论是否遵守MVC模式,我都不知道这是否可能。
我没有使用任何mvc框架,如果可以的话,我希望避免使用它,而是使用一个类似于上的基本系统。https://www.youtube.com/watch?v=OsCTzGASImQ
有什么想法、建议、替代方案吗?
这里有几个关于"更改URL而不重新加载"的答案,例如:修改URL而不重加载页面。
因此,我认为您只需要从其中一个答案中实现一些解决方案,并运行一些javascript来更改页面。
您必须小心,因为在javascript引起更改后,修改后的URL必须加载用户看到的页面的相同版本。否则,如果用户复制并粘贴URL,他将不会高兴。
归档它的一种方法是创建javascript函数来"更新"页面,而不需要根据文本输入重新加载页面(比如f
)。然后,如果用户尝试直接访问页面
www.example.com/public/home/search?q=一些+搜索+查询
您的服务器端代码只需返回页面搜索,并在末尾调用此javascript函数,如下所示:
f("some search query")
因此,该功能将更新页面,最终效果将与用户刚在页面中输入并尝试键入后的一些搜索查询相同。
(请注意,此函数f
可用于两种情况:当用户键入要搜索的文本时,以及当用户仅粘贴整个URL时)。