Question

现在，当用户在文本字段中输入单词并点击搜索时，表单将使用$.get()提交。从服务器获取数据（JSON），然后更新UI。

我想要做的很简单：

1）当表单提交时，浏览器的URL需要更新（类似search/zyx，zyx是用户正在搜索的内容。）

2）当页面被预订到收藏夹中，或者从页面需要加载的某个地方点击链接，然后文本字段值必须是＆＃39; zyx＆＃39;。此外，用户界面还需要显示zyx的搜索结果。

这对我的应用非常重要，因为我将使用Google Analytics。因此需要URL来反映行为。加上其他问题，如后退按钮历史记录。这可能只使用jQuery或一些构建在jQuery上的极轻的库。我到处搜索，我找到的所有解决方案都使用MVC框架。或者另一种解决方案是使用像this one这样的模板框架。但是我的应用程序对于这些解决方案来说太简单了。

Answer 1

如果我了解您想在某些操作完成后更改用户的URL。还有一个关于它的主题HERE，他们使用

window.location.replace(url)

希望它可以帮助你：）

Answer 2

阅读这篇文章：https://rosspenman.com/pushstate-jquery/

或考虑使用PageJs

Answer 3

因此，您需要的方法是在URL中监听哈希更改，并根据此获取当前页面并将其呈现在一个投币器中。像这样：

<a href="#page2">Go to Page 2</a>
<div class="page-container"></div>
<script>
$(window).on('hashchange',function(){ 
  var page = window.location.hash;
  $.get('pages/'+page+'.html', function(pageContent){
     $('.page-container').html(pageContent);
  })   
});
</script>

Answer 4

谢谢大家。所以我最终使用了@Tulio Faria的答案和@Gabriele Mantovani之间的组合。

要从网址获取搜索关键字，我使用了window.location.hash
更新使用history.pushState({id: 'query'}, '', 'some_url_string');
如果点击了浏览器的后退或前进按钮，则使用$(window).on('hashchange',function(){...})加载当前搜索关键字的页面

Answer 5

简单的jQuery，基于javascript的路由。

<html>
  <head>
    <title>KCS Website australia</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <a href="#/about">About</a> | <a href="#/contact">Contact Us</a>

    <div class="page-container"></div>
  </body>
  <script>
    $(window).on("hashchange", function () {
      var page = window.location.hash;
      console.log(page.substring(2));
      $.get("pages/" + page.substring(2) + ".html", function (pageContent) {
        $(".page-container").html(pageContent);
      });
    });
  </script>
</html>

如何使用单一页面应用程序构建仅使用jQuery构建路由

5 个答案: