在不更改URL或不重新加載整個頁面的情況下調用功能的按鈕？

Question

現在我有2個按鈕，一個按鈕調用一個函數來執行某項操作，另一個按鈕將信息顯示在頁面上。

router.get('/run-func', function(res, req, next) {
    //call function
    res.render('index');
};

router.get('/get-data', function(res, req, next) {
    //get info from db...
    res.render('index', {items: tempArray});
};

每次單擊按鈕都會將我發送到另一個網址，但會顯示索引頁面：

http：// localhost：3000 / run-func

http：// localhost：3000 / get-data

問題是，每當我單擊run-func時，它都會重新加載頁面，並且從get-data中顯示的數據會消失。 有沒有辦法使這些按鈕不加載不同的URL？

HTML是使用把手完成的，這是獲取數據的一個：

<div class="get">
    <h3>Get Data</h3>
    <a href="/get-data">LOAD DATA</a>
    <div>
        {{# each items }}
            <article class="item">
                <div>id: {{ this._id }}</div>
                <div>prop: {{ this.prop }}</div>
            </article>
        {{/each}}
    </div>
</div>

Answer 1

嘗試這個

 function processAjaxData(response, urlPath){ document.getElementById("content").innerHTML = response.html; document.title = response.pageTitle; window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath); } 

然后，您可以使用window.onpopstate來檢測后退/前進按鈕導航：

 window.onpopstate = function(e){ if(e.state){ document.getElementById("content").innerHTML = e.state.html; document.title = e.state.pageTitle; } };