按鈕調用函數而不更改URL或重新加載整個頁面？

現在我有2個按鈕，一個調用一個函數做某事，另一個在頁面上顯示信息。按鈕調用函數而不更改URL或重新加載整個頁面？

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}); 
};

一個按鈕，點擊它向我發送到另一個URL，但顯示的索引頁每一次：

http://localhost:3000/run-func

http://localhost:3000/get-data

的問題是我每次點擊一次運行FUNC它重新加載頁面，並且從get-data中顯示的數據消失。有沒有辦法讓這些按鈕不加載不同的網址？

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

來源

2016-08-16 CodingNinjaInTraining

您發佈的代碼是服務器端。但是你描述的問題似乎是客戶端。您應該添加按鈕的客戶端實現（HTML代碼）。 – Cubius

首先，您需要知道res.render的功能，因爲它會返回一個HTML模板。 http://stackoverflow.com/a/21843991/572348 其次，創建一個像這樣的'/ somepath'的href的acnchor 將永遠導航您的瀏覽器到另一個頁面。所以如果你只是想從express獲得一些數據並將其放在頁面上，至少需要兩件事：1）有一個返回數據的服務器路由（例如JSON）2）有一個客戶端代碼，它調用AJAX請求到那條路線，得到那個JSON並且使用它。 – Cubius

試試這個

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; 
 
    } 
 
};

來源

2016-08-16 05:54:52

按鈕調用函數而不更改URL或重新加載整個頁面？

回答

相關問題