我有一个返回ModelAndView的控制器，这个控制器是用这个脚本调用的：
document.getElementById('history-equipment').addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default anchor tag behavior (e.g., navigating to a new page)
const url = '/View/Student/History'; // Replace with your API endpoint URL
var token = localStorage.getItem("token");
// Request headers
const headers = {
'Content-Type': 'application/json',
'Authorization': token.valueOf() // Replace with your actual access token
};
// Request options
const requestOptions = {
method: 'GET', // Replace with the HTTP method you want to use (e.g., GET, POST, PUT, DELETE)
headers: headers
};
// Send the request
fetch(url, requestOptions)
.then(response => response.text()) // Use response.text() instead of response.json() to get the HTML content
.then(data => {
// Handle the response data
console.log(data);
// Render the returned model and view
renderModelAndView(data);
})
.catch(error => {
// Handle any errors
console.error('Error:', error);
});
});
function renderModelAndView(htmlContent) {
// Replace the entire HTML page with the received content
document.open();
document.write(htmlContent);
document.close();
}这是我想要呈现的HTML模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- icons link-->
<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- custom css link-->
<link rel="stylesheet" href="../../static/css/style.css">
<title>Request Equipment</title>
</head>
<body>
<!-- SIDEBAR -->
<section id="sidebar">
<a href="#" class="logo"><img src="../../static/css/images/logo.png" class="logo-pic"> Smart EMS</a>
<ul class="side-menu">
<li><a href="" ><i class='bx bx-devices icon'></i> Allocation History</a></li>
<li><a href="/View/Student/Request" ><i class='bx bx-devices icon'></i> Request Equipment </a></li>
</ul>
</section>
<!-- NAVBAR -->
<section id="content">
<nav>
<i class='bx bx-menu toggle-sidebar' ></i>
<form action="#"></form>
<div id="toggle-btn" class="fas fa-sun"></div>
<div class="notif">
<i class="bi bi-bell-fill nav icon" id="bell"></i>
<ul class="notif-link">
<li><a href="#" ><i class="bi bi-bell-fill icon "style="color: green;"></i>check</a></li>
<hr>
<li><a href="#"><i class="bi bi-bell-fill icon" style="color: green;"></i>check</a></li>
<hr>
<li><a href="#"><i class="bi bi-bell-fill icon" style="color: green;"></i>check</a></li>
</ul>
</div>
<span class="divider"></span>
<div class="profile">
<img src="../../static/css/images/student.png" alt="">
<ul class="profile-link">
<li><a href="Student-ManageMyAccount.html" ><i class="bi bi-person-circle icon"></i>Update info</a></li>
<li><a href="../Login%20&%20Sign-up.html"><i class="bi bi-box-arrow-in-left"></i> Logout</a></li>
</ul>
</div>
</nav>
<!-- MAIN -->
<main>
<h1 class="title">Request Equipment</h1>
<ul class="snippet">
<li><a href="#">Home</a></li>
<li class="divider">/</li>
<li><a href="#" class="active"> Request Equipment </a></li></ul>
<div class="data">
<div class="content-data">
<!-- data table -->
<div class="head">
<h3>Equipment Details</h3>
</div>
<div class="table-wrapper">
<table class="fl-table">
<thead>
<tr>
<th>Item ID</th>
<th>Serial number</th>
<th>Type</th>
<th>Description</th>
<th>State</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>#</td>
<td>#</td>
<td>Content 1</td>
<td>Content 1</td>
<td>Content 1</td>
<td>
<a href="Student-SendRequestEquipment.html" class="table-button1">Request</a>
</td>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>Content 2</td>
<td>Content 2</td>
<td>Content 2</td>
<td>
<a href="Student-SendRequestEquipment.html" class="table-button1">Request</a>
</td>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>Content 3</td>
<td>Content 3</td>
<td>Content 3</td>
<td>
<a href="Student-SendRequestEquipment.html" class="table-button1">Request</a>
</td>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>Content 4</td>
<td>Content 4</td>
<td>Content 4</td>
<td>
<a href="Student-SendRequestEquipment.html" class="table-button1">Request</a>
</td>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>
<a href="Student-SendRequestEquipment.html" class="table-button1">Request</a>
</td>
</tr>
</tbody>
<tbody>
</table>
</div>
</div>
</div>
</main>
</section>
<!--custom js link-->
<script src="../../static/js/script.js"></script>
<script src="../../static/js/script2.js"></script>
</body>
</html>页面呈现正常，但绑定到按钮的功能停止工作，我点击，什么也没有发生。我试着从外部文件中获取Js并将其添加到HTML页面本身，但这不起作用。我认为这与事件侦听器中断有关。那么有没有办法加载javaScript或者刷新eventListeners呢？
1条答案
按热度按时间nmpmafwu1#
我假设你正在从服务器获取一些HTML代码作为字符串。您可以尝试使用iframe来嵌入此代码。但是首先你需要在你调用这个URL的文档中创建一个带有iframe的html主体。