Sie können dies nicht tun, wenn Sie eine Anfrage mit einem API-Aufruf von Ajax oder anderen Methoden übermitteln.
Wie alle diese Methoden sind Single Page Application zu implementieren , daher ist das Rendern einer anderen Seite nicht zulässig.
Was passiert, wenn die Bedingung erfüllt ist und das Rendern einer anderen Seite angefordert wird?
Das Modul, das die API aufgerufen hat, wartet auf eine Antwort im Browser, um eine Antwort von der API zu erhalten, aber Ihre API versucht, eine andere HTML-Seite zu laden, die der Browser verbietet, und daher werden Sie niemals über einen Ajax-Aufruf gerendert.
Wie geht das?
Es gibt zwei Auswege:
- Einzelseitenanwendung:Mit JavaScript-Frameworks wie AngularJs hilft Ihnen ReactJs, indem es nur HTML-Vorlagen und nicht die ganze Seite ändert.
Mit Ajax können Sie dies tun:
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);
}
});
}
Serverseitiger Code Ich gehe davon aus, dass Sie express.js und Body-Parser verwenden
app.post('/addName', (req, res) => {
//Insert into db
var body = req.body;
res.send({
fName: body.FName,
lName: body.LName
});
});
- Verwenden Sie
form
Submit-Methode:Mit dieser Methode können Sie die Seite rendern, aber Sie können keine Antwort an dieselbe Seite zurücksenden, d. h.
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
});
}
});
});