Vous ne pouvez pas le faire si vous soumettez une demande à l'aide d'un appel API depuis Ajax ou d'autres méthodes.
Comme toutes ces méthodes doivent implémenter une application à page unique , l'affichage d'une page différente n'est donc pas autorisé.
Que se passe-t-il lorsque la condition est remplie et demande d'afficher une page différente ?
Le module qui a appelé l'API attend une réponse sur le navigateur pour obtenir une réponse de l'API, mais votre API essaie de charger une page HTML différente interdite par le navigateur et vous ne serez donc jamais rendu via l'appel Ajax.
Comment faire ?
Il existe deux solutions :
- Application à page unique :en utilisant des frameworks JavaScript comme AngularJs, ReactJs vous aidera en modifiant simplement les modèles HTML et non la page entière.
Avec Ajax, vous pouvez faire ceci :
HTML
<body>
<div>
<div align="center">
<form id="form1">
<label>Please enter below details</label><br><br>
<label>First Name *: </label><input id="FName" type="text" name="FName"/><br><br>
<label>Last Name *: </label><input id="LName" type="text" name="LName"/><br><br>
<label>Email Address *: </label><input type="email" name="email"><br><br>
<br><br>
<input type="button" value="Submit" onClick:"submitForm()"/>
</form>
<div id="showValue"></div>
</div>
</div>
</body>
JavaScript
function submitForm() {
$.ajax({
url: '/addName',
type: 'POST',
headers: headers,
data: {
"Fname": $("#FName").val(),
"Lname": $("#LName").val(),
"email": $("#email").val()
},
success: function(result) {
//append result to your html
//Dynamic view
$("#form1").hide();
var html = '<div><span>First Name: ' + result.fName + '</span><span>Last Name: ' + result.lName + '</span></div>';
$("#showValue").html(html);
},
error: function (error) {
alert('error ',error);
}
});
}
Code côté serveur, je suppose que vous utilisez express.js et body-parser
app.post('/addName', (req, res) => {
//Insert into db
var body = req.body;
res.send({
fName: body.FName,
lName: body.LName
});
});
- Utilisez le
form
Méthode de soumission :en utilisant cette méthode, vous pourrez afficher la page, mais vous ne pourrez pas renvoyer la réponse à la même page, c'est-à-dire
HTML
<body>
<div>
<div align="center">
//Can't send params using this approach
//Data will be send as query string
<form action="/postedUser/" method="GET">
<label>Please enter below details</label><br><br>
<label>ID *: </label><input id="ID" type="text" name="ID"/><br><br>
<input type="submit" value="Submit" /></form>
</div>
</div>
</body>
NodeJS
//If there will be res.send({});
// This won't be returned to same page. But your code doesn't do any such thing
router.get('/postedUser/', ensureAuthenticated, function(req, res) {
User.findOne({_id: req.query.id}, function(err, data) {
if (err) throw err;
if (req.user._id == data._id) {
res.redirect('/users/profile');
} else {
res.render('postedUser', {
data: data
});
}
});
});