Bạn không thể làm như vậy nếu bạn đang gửi yêu cầu bằng lệnh gọi API từ Ajax hoặc các phương pháp khác.
Vì tất cả các phương pháp này là để triển khai Ứng dụng một trang , vì vậy không được phép hiển thị một trang khác.
Điều gì xảy ra khi điều kiện được đáp ứng và yêu cầu hiển thị một trang khác?
Mô-đun có tên API đang chờ phản hồi trên trình duyệt để nhận một số phản hồi từ API, tuy nhiên API của bạn đang cố tải một trang HTML khác mà trình duyệt cấm và do đó bạn sẽ không bao giờ được hiển thị qua lệnh gọi Ajax.
Làm thế nào để làm điều đó?
Có hai lối thoát:
- Ứng dụng một trang:Việc sử dụng các Khung JavaScript như AngularJs, ReactJs sẽ giúp bạn bằng cách chỉ thay đổi các mẫu HTML chứ không phải toàn bộ trang.
Với Ajax, bạn có thể làm điều này:
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);
}
});
}
Mã phía máy chủ Tôi giả sử bạn đang sử dụng express.js và body-parser
app.post('/addName', (req, res) => {
//Insert into db
var body = req.body;
res.send({
fName: body.FName,
lName: body.LName
});
});
- Sử dụng
form
Phương thức gửi:sử dụng phương pháp này, bạn sẽ có thể hiển thị trang nhưng bạn không thể gửi phản hồi trở lại cùng một trang, tức là,
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
});
}
});
});