用Express递交邮件请求后如何留在同一页面?

时间:2018-06-05 14:32:38

标签: javascript express

我知道这可能是一个简单的问题,但我找不到我想要的解决方案。我用快递写了一个帖子。像这样:

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。然后我希望页面不是直接到任何地方,而是保持当前页面。我尝试了一些方法,但没有很好地处理它。我尝试了什么:

  1. 在路线上, res.render('/search'); 这使得页面使用相同的视图重新渲染,但由于重新渲染,页面将闪烁。

  2. 不对路线中的res做任何事情,然后页面加载圈将永远不会停止。

    app.post('/ search',function(req,res){ var data = req.body.marker; //一些代码将数据插入db //然后什么都不做页面将保留但继续加载。 });

  3. 有没有办法只对res做任何事情并留下来,同时不保持页面加载?

2 个答案:

答案 0 :(得分:5)

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

  1. 返回204 No Content response。 (app.post('/search', (req, res) => res.status(204).send());
  2. 使用JavaScript(即Ajax,例如XMLHttpRequest)发出请求,而不是提交表单
  3. (您也可以将表单提交给隐藏的iframe,但这只是一个丑陋的黑客攻击)。

答案 1 :(得分:0)

您可以通过以下两种方式进行操作:
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
});