如何使用jQuery完成單頁應用程序構建

現在，當用戶在文本字段中輸入單詞並點擊搜索時，表單將使用$.get()進行提交。數據（JSON）從服務器獲取，然後UI被更新。如何使用jQuery完成單頁應用程序構建

我想要做的是非常簡單的：

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

2）當頁面被預訂到收藏夾中，或者從頁面需要加載的地方點擊鏈接，然後文本框的值必須是'zyx'。此外，用戶界面需要顯示zyx的搜索結果。

這對我的應用很重要，因爲我將使用Google Analytics。所以需要URL來反映行爲。加上後退按鈕歷史記錄等其他問題。這可能只使用jQuery或一些基於jQuery的非常輕型的庫。我到處搜索，我發現的所有解決方案都是使用MVC框架。或者另一種解決方案是使用像this one這樣的模板框架。然而，我的應用程序對於這些解決方案太簡單了。

來源

2017-01-02 Moqbel

考慮使用框架，如AngularJS/ReactJS等 –

這將解決問題，但我必須學習這些框架，而不是我不想。但我正在使用我目前的技能尋找一種簡單的方法:)。此外，我的應用程序非常簡單，以至於使用SPA框架對於我將用來學習它們然後編寫我的應用程序的時間來說是一種過度消耗。 – Moqbel

除非多數民衆贊成的唯一途徑，那麼我也是閒着吧。只是懶惰，哈哈！ – Moqbel

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

或考慮使用的PageJs

來源

2017-01-02 11:34:05

所以，你所需要的辦法是聽散列在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>

來源

2017-01-02 11:35:05

如果我理解你想改變用戶的URL時，一些動作就完成了。有一個關於它的HERE其他的話題，他們使用

window.location.replace(url)

希望它可以幫助你:)

來源

2017-01-02 11:35:25 Ilphrin

感謝您的建議，但@llphrin'window.location的。替換（url）'會導致頁面刷新，並且認爲應用程序的整個目的是作爲單個頁面應用程序 – Moqbel

感謝你們每一個人。所以，我結束了使用@Tulio Faria的答案，@Gabriele Mantovani之間的組合。

從網址獲得搜索關鍵字我用window.location.hash
要更新URL中使用history.pushState({id: 'query'}, '', 'some_url_string');
用於$(window).on('hashchange',function(){...})將當前的搜索關鍵字的網頁，如果被點擊或者背部或瀏覽器的前進按鈕

來源

2017-01-07 16:07:37 Moqbel

如何使用jQuery完成單頁應用程序構建

回答

相關問題