將動態內容插入到php頁面並更改網址

我的目標是：我有一個表單，它位於第1-4部分，當用戶單擊「下一步」按鈕時我希望將內容製作成動畫，然後是第2部分幻燈片等，直到表格完成。棘手的部分是我想嘗試在另一個子文件夾中使用不同的PHP頁面來插入其他3個部分。這也會改變用戶看到的URL子文件夾。將動態內容插入到php頁面並更改網址

工作示例實際上是WordPress。當您點擊多部分表單時，您將看到內容和URL的行爲如我所描述的。

我做了一些挖掘，看起來他們在內容上使用了React.js，但我無法真正找到任何有關如何使用React.js執行此操作的文檔，所以它讓我覺得它可能是自定義的Ajax/jQuery或什麼。

我的文件夾的樹 -

主
- 子文件夾-1
  - 的index.php
- 子文件夾-2
  - 的index.php

等。我能想到的唯一的事情會使用jQuery：

$(document).ready(function() { 
 
    $('#form-container').on('click', '.insert', function() { 
 
    var directory = $(this).attr('name'); 
 
    $('#form-container').load('../' + directory); 
 

 
    return false; 
 
    }); 
 
});

我添加「下一步」按鈕之類的「插入」，並給它一個name="Subfolder-2"$('#form-container').load('../Subfolder-2);'實際上將加載內容到沒有頁面刷新的div，但它不會更改URL中的子文件夾。

我在錯誤的軌道上嗎？也許我只是沒有尋找正確的東西？

來源

2016-07-16 Matthew

我想你需要使用'window.history.pushState'來添加一個歷史記錄條目（並更改URL）。然後你需要使用'window.onpopstate'來處理用戶點擊瀏覽器的後退按鈕。看[這個答案]（http://stackoverflow.com/a/3354511/859640）。 –

謝謝你，當我今晚回到家時，我會嘗試你的建議。這是有道理的。我從來沒有想過使用pushState和onpopstate。 – Matthew

嗨，@JohnS，我想再次表示感謝您昨天的評論。在對'history.pushState'和'popstate'進行了相當多的研究和測試之後，我已經得到了這個功能的描述。如果您發佈您的建議作爲答案，我會接受它。再次感謝！你很有幫助 – Matthew

好的，所以我最終弄清楚瞭如何讓內容像我想要的那樣用John S.提供給我的信息行事。做一些研究和反覆試驗了幾個小時後，我想出了下面的JavaScript：

var data = 'start', 
    url = '../' + data + '/'; 
    history.pushState(data, null, url);

我在上面設置的變量，並立即在頁面加載運行history.pushState來捕獲加載到第一個div內容分區。這很重要，因爲這是我能夠在點擊瀏覽器後退按鈕時加載初始加載回頁面的內容的唯一方式。

$('body').on('click', '.insert', function(e) { 

     data = $(this).attr('data-name'), 
     url = '../' + data + '/'; 

     history.pushState(data, null, url); 

    request_content(data); 

    return false; 

});

然後我添加一個點擊監聽器按鈕與類.insert重置變量，這樣，而不是抓住最初加載它抓住，將加載頁面的頁面，然後使用history.pushState再次更改網址由變量決定。

request_content函數是一個簡單的.load函數。因此，當按鈕被點擊時，變量被設置，URL更改和新內容被加載到頁面中，而舊內容消失。

最後一塊拼圖花了我最長的時間纔算出來，實際上是popstate函數。我仍然不能100％確定它爲什麼可行，但經過幾個小時的搞亂並最終實現它，我不會去質疑它。

window.addEventListener('popstate', function(e){ 
    var data = e.state; 

    if(data === null) { 

    } else { 
     request_content(data); 
    } 
});

這popstate功能是允許內容回來擊中瀏覽器後退或前進導航時。

CSSTricks < CSSTricks的這篇文章在學習此方法時幫助了TON。

再次感謝約翰S.指出我在正確的方向！

來源

2016-07-19 20:34:30 Matthew

將動態內容插入到php頁面並更改網址

回答

相關問題