使用 Express 提交 post 请求后如何保持在同一页面？答案

【问题标题】：How to stay at the same page after submitting post request with Express?使用 Express 提交 post 请求后如何保持在同一页面？
【发布时间】：2018-06-05 14:32:38
【问题描述】：

我知道这可能是一个简单的问题，但我只是没有找到我想要的解决方案。我用快递写了一个帖子路线。像这样：

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

我的html：

<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发送到post路由，并插入到db。然后我希望页面不直接到任何地方，而是保持当前页面。我尝试了一些方法，但处理得不是很好。我尝试了什么：

在路上，

res.render('/search');

这会使页面以相同的视图重新渲染，但页面会因为重新渲染而闪烁。

不要对路由中的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 不做任何事情并留下来，同时不保持页面加载？

【问题讨论】：

相关：What is AJAX and how does it work?

标签： javascript express

【解决方案1】：

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

返回204 No Content response。 (app.post('/search', (req, res) => res.status(204).send());)
使用 JavaScript（即 Ajax，例如使用 XMLHttpRequest）发出请求，而不是提交表单

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

【讨论】：

您好，如果我想留在同一页面并提示“数据提交成功”并清除表单数据怎么办？@Quentin

【解决方案2】：

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

$("#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
});

【讨论】：