按钮调用函数而不更改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或重新加载整个页面？

回答

相关问题