使用Express提交帖子请求后如何保持同一页面?

Question

我知道这可能是一个简单的问题，但我只是没有找到我想要的解决方案。我用快递写一条邮政路线。喜欢这个：

app.post('/search', function(req, res){
// Some code to get data from req and save data to db
// Then want to stay current page.
});

我的网页：

<form action="/search" method="post">
<input value="name" name="marker[name]">
<input value="address" name="marker[address]">
<input value="rating" name="marker[rating]">
<button id="favo-button" type="submit">
Submit
</button>
</form>

当用户点击提交按钮时，数据通过req发送到邮政路由，并在那里插入到db。然后我希望页面不直接到任何地方，而是保持当前页面。我尝试了一些方法，但处理得不是很好。我尝试过：

1. 在路线上，

res.render('/search');

这使得页面使用相同的视图重新呈现，但页面会因为重新呈现而闪烁。

2. 不要对路由中的 res 执行任何操作，则页面加载圈将永远不会停止。

app.post('/search', function(req, res){
var data = req.body.marker;
// some code insert data to db
// then do nothing to res. The page will stay but keep loading.
});

有没有办法不做任何res并留下来，同时不保持页面加载？

Answer 1

有两种方法可以做到这一点。

1. 返回204 No Content响应。(在Express中：app.post('/search', (req, res) => res.status(204).send());，但这是您可以在任何服务器端代码中执行的基本HTTP(
使用
2. JavaScript 发出请求(即 Ajax，例如使用 XMLHttpRequest(，而不是提交表单

(您也可以将表单提交到隐藏的iframe，但这只是一个丑陋的黑客(。

Answer 2

您可以通过两种方式做到这一点：
1 - 使用 Jquery AJAX 调用执行此操作，您需要在视图页面中编写此代码，而不是在 NODEJS 应用程序的控制器或路由中编写此代码。

$("#YOUR_FORM_ID").on("submit", function () {
$.ajax({
url: '/search',
type: 'POST',
cache: false,
data: { $("#YOUR FORM ID").serialize() },
success: function (data) {
alert('Success!')
}
, error: function (jqXHR, textStatus, err) {
alert('text status ' + textStatus + ', err ' + err)
}
});
});

2 - 通过将请求重定向到源请求

app.post('/search', function(req, res){
//Do Something
res.redirect('/');//redirect to the page from where request came
});