已掌握JSP从Servlet取数据，如何在HTML文件中实现？

我知道在JSP文件中可以用以下脚本片段从Servlet获取数据：

<% String errorMessage = (String)request.getAttribute("errorMessage"); %>

 <% if (errorMessage != null) { %> 

<h1><%= errorMessage %></h1><br> 

<h1>Login Failed!</h1>

 <% } %>

但使用HTML文件时，该怎么实现从Servlet获取数据？我的HTML文件代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Authentication</title>
<style>
/* Style for the form group */
.form-group {
    display: flex; /* This makes labels and inputs align horizontally */
    margin-bottom: 10px; /* Adds some space between form groups */
    justify-content: center;
}

/* Style for labels */
label {
    margin-top: 5px;
    flex-basis: 100px; /* Set a fixed width for labels (adjust as needed) */
    text-align: center; /* Align labels to the right for better alignment */
}

/* Style for inputs */
input {
    padding: 5px; /* Add some padding for better appearance */
}

</style>
</head>
<body>
    <form action="authServlet" method="post" style="text-align:center; margin-top:30vh" >
        <div class="form-group">
            <label>Username</label>
        <input type="text" name="name" >
        </div>
        <div class="form-group">
            <label>
            Password
        </label>        
        <input type="password" name="pwd">
        </div>
        <input type="submit" value="Connect">   
    </form>
    <h1> Message: ${Users}</h1>
    
</body>
</html>

纯HTML是静态资源，无法像JSP（本质是编译后的Servlet）那样直接解析请求域中的属性（比如request.getAttribute()或EL表达式${Users}）。你可以通过以下几种方式实现需求：

方法1：将HTML文件改为JSP文件（最简单直接） #

只需要把你的.html文件后缀改成.jsp，无需修改其他代码，就能直接使用EL表达式读取Servlet中通过request.setAttribute("Users", 数据)传入的值。

如果要实现类似JSP脚本里的判断逻辑，推荐用EL结合JSTL标签替代脚本片段，比如：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:if test="${not empty errorMessage}">
    <h1>${errorMessage}</h1><br>
    <h1>Login Failed!</h1>
</c:if>

方法2：通过URL参数传递数据（适合纯HTML场景） #

如果必须使用纯HTML文件，可以在Servlet转发或重定向时，把数据拼接到URL参数中，再用JavaScript在HTML里解析参数。

步骤1：Servlet中传递参数 #

比如登录失败时，重定向到HTML并携带错误信息：

response.sendRedirect("login.html?error=1&message=用户名或密码错误");

步骤2：HTML中解析参数 #

在HTML的<script>标签中添加代码，读取并展示参数：

<script>
function getUrlParam(name) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(name);
}

const errorFlag = getUrlParam('error');
const msg = getUrlParam('message');
if (errorFlag) {
    const messageElement = document.querySelector('h1');
    messageElement.textContent = `Message: ${msg || '登录失败'}`;
}
</script>

方法3：使用AJAX异步获取数据（适合无刷新场景） #

如果不想刷新页面，可以用JavaScript的Fetch API向Servlet发送异步请求，获取数据后更新页面内容。

示例代码 #

在HTML中添加脚本：

<script>
window.onload = function() {
    fetch('authServlet', {
        method: 'GET' // 匹配Servlet的请求方式
    })
    .then(response => response.text()) // 若返回JSON则用response.json()
    .then(data => {
        const messageElement = document.querySelector('h1');
        messageElement.textContent = `Message: ${data}`;
    })
    .catch(err => console.error('获取数据失败:', err));
};
</script>

此时Servlet需要处理对应请求，并返回文本或JSON格式的数据。

内容的提问来源于stack exchange，提问作者Omar Khelifi