I know this might be a simple question but I just didn't find the solution I want. I write a post route with express. like this:
app.post('/search', function(req, res){
// Some code to get data from req and save data to db
// Then want to stay current page.
});
My 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>
When user click submit button, the data sent through req to the post route, and there insert to db. Then I want the page not direct to anywhere but stay current page. I tried some ways but not handle it very well. what I tried:
res.render('/search');
this makes the page re-render with the same view, but the page will flash because of the re-render.
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.
});
Is there a way to just do nothing to res and stay, meanwhile not keep the page loading?
There are two ways to do this.
204 No Content response. (app.post('/search', (req, res) => res.status(204).send());)(You could also submit the form to a hidden iframe, but that's just an ugly hack).
You can do it in 2 ways:
1 - Do it using Jquery AJAX call, you need to write this code in your view page, not in controller or route of 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 - By redirecting the request to the source request
app.post('/search', function(req, res){
//Do Something
res.redirect('/');//redirect to the page from where request came
});