如何通過僅使用 jQuery 構建的單頁應用程序實現路由

Question

現在，當用戶在文本字段中輸入一個詞並點擊搜索時，表單使用$.get()提交。 從服務器獲取數據（JSON），然后更新 UI。

我想做的很簡單：

1）表單提交時，瀏覽器的URL需要更新（類似search/zyx ， zyx就是用戶搜索的）。

2）當頁面被預訂到收藏夾時，或從頁面需要加載的某個地方作為鏈接單擊時，文本字段值必須為“zyx”。 UI 還需要顯示zyx搜索結果。

這對我的應用很重要，因為我將使用 Google Analytics。 所以需要 URL 來反映行為。 加上其他問題，如后退按鈕歷史記錄。 這是否可以僅使用 jQuery 或一些基於 jQuery 構建的極其輕量級的庫。 我到處搜索，我找到的所有解決方案都使用 MVC 框架。 或者另一種解決方案是使用像一個模板框架，這一個。 然而，我的應用程序對於這些解決方案來說太簡單了。

Answer 1

因此，您需要的方法是監聽 url 中的哈希更改，並基於此獲取當前頁面並將其呈現在 cointainer 中。 像這樣的東西：

<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 2

閱讀這篇文章： https ： //rosspenman.com/pushstate-jquery/

或者考慮使用PageJs

Answer 3

謝謝大家。 所以我最終使用了@Tulio Faria的答案和@Gabriele Mantovani之間的組合。

為了從 url 中獲取搜索關鍵字，我使用了window.location.hash
更新 url 使用history.pushState({id: 'query'}, '', 'some_url_string');
如果單擊瀏覽器的后退或前進按鈕，則使用$(window).on('hashchange',function(){...})加載當前搜索關鍵字的頁面

Answer 4

簡單的 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>

Answer 5

如果我知道您想在完成某些操作后更改用戶的 URL。 有一個關於它的其他話題這里，而且他們使用

window.location.replace(url)

希望對你有幫助：）

如何通過僅使用 jQuery 構建的單頁應用程序實現路由

問題描述

4 個解決方案

解決方案1
7 2017-01-02 11:35:05

解決方案2
1 已采納 2017-01-02 11:34:05

解決方案3
1 2017-01-07 16:07:37

解決方案4
1 2020-09-21 14:46:33

解決方案5
0 2017-01-02 11:35:25

如何通過僅使用 jQuery 構建的單頁應用程序實現路由

問題描述

4 個解決方案

解決方案1 7 2017-01-02 11:35:05

解決方案2 1 已采納 2017-01-02 11:34:05

解決方案3 1 2017-01-07 16:07:37

解決方案4 1 2020-09-21 14:46:33

解決方案5 0 2017-01-02 11:35:25

解決方案1
7 2017-01-02 11:35:05

解決方案2
1 已采納 2017-01-02 11:34:05

解決方案3
1 2017-01-07 16:07:37

解決方案4
1 2020-09-21 14:46:33

解決方案5
0 2017-01-02 11:35:25