Anda tidak dapat melakukannya jika mengirimkan permintaan menggunakan panggilan API dari Ajax atau metode lain.
Karena semua metode ini menerapkan Aplikasi Satu Halaman , jadi rendering halaman yang berbeda tidak diperbolehkan.
Apa yang terjadi ketika kondisi terpenuhi dan permintaan untuk merender halaman yang berbeda?
Modul yang memanggil API sedang menunggu respons di browser untuk mendapatkan respons dari API, namun API Anda mencoba memuat halaman HTML lain yang dilarang browser dan dengan demikian Anda tidak akan pernah dirender melalui panggilan Ajax.
Bagaimana melakukannya?
Ada dua jalan keluar:
- Aplikasi Satu Halaman:Menggunakan Kerangka JavaScript seperti AngularJs, ReactJs akan membantu Anda hanya dengan mengubah template HTML dan bukan seluruh halaman.
Dengan Ajax Anda dapat melakukan ini:
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);
}
});
}
Kode sisi server Saya berasumsi Anda menggunakan express.js dan body-parser
app.post('/addName', (req, res) => {
//Insert into db
var body = req.body;
res.send({
fName: body.FName,
lName: body.LName
});
});
- Gunakan
form
Metode kirim:menggunakan ini Anda akan dapat merender halaman namun Anda tidak dapat mengirim respons kembali ke halaman yang sama yaitu,
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
});
}
});
});