將動態內容插入php頁面並更改URL

Question

我的目標：我的表單分為1-4部分，當用戶單擊“下一步”按鈕時，我希望內容進行動畫處理，然后滑動第2部分，依此類推，直到完成表單。 棘手的部分是我將嘗試在其他子文件夾中使用其他php頁面作為其他3個部分插入。 這也將更改用戶看到的URL子文件夾。

工作示例實際上是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中的子文件夾。

我走錯了路嗎？ 也許我只是在尋找合適的東西？

Answer 1

好的，所以我最終想出如何利用John S.提供給我的信息使內容按我想要的方式工作。 經過研究和幾個小時的反復試驗后，我想到了以下JavaScript：

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

在上面我設置了變量，並在頁面加載時立即運行了一個history.pushState來捕獲加載到內容div中的第一個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。

再次感謝John S.向我指出正確的方向！