JSP页面单选按钮登录跳转至对应角色页面实现咨询

针对你的需求，下面提供两种实现方式，分别基于后端Servlet处理和前端JavaScript处理：

一、后端Servlet处理（推荐，符合Java Web标准流程） #

你的表单已经指定了action="LoginServlet"，可以通过编写Servlet来处理登录请求并完成角色跳转：

步骤1：修正表单细节 #

先调整表单里的几个问题，避免后续参数获取出错：

• 表单控件的name属性不要带空格，比如"Employee name"改为"employeeName"，"Employee ID"改为"employeeId"，"Email id"改为"emailId"
• 密码输入框的type改为"password"，避免密码明文显示

步骤2：编写LoginServlet类 #

创建继承HttpServlet的Servlet类，在doPost方法中处理请求：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置请求编码，避免中文乱码
        request.setCharacterEncoding("UTF-8");
        
        // 获取表单参数
        String userRole = request.getParameter("SELECT_USER");
        String employeeName = request.getParameter("employeeName");
        String employeeId = request.getParameter("employeeId");
        String emailId = request.getParameter("emailId");
        String password = request.getParameter("Password");

        // 这里可添加登录验证逻辑（比如查询数据库校验账号密码）
        // 示例：简单判断非空
        if (employeeName != null && !employeeName.isEmpty() && password != null && !password.isEmpty()) {
            // 根据角色跳转对应页面
            if (userRole != null) {
                // 重定向跳转，若需传递参数可改用服务器端转发：request.getRequestDispatcher(userRole).forward(request, response);
                response.sendRedirect(userRole);
            }
        } else {
            // 验证失败，跳回登录页面
            response.sendRedirect("login.jsp"); // 假设你的登录页面文件名是login.jsp
        }
    }
}

步骤3：确认目标页面存在 #

确保项目根目录下已创建Admin.jsp、Employee.jsp、Project_Manager.jsp三个页面。

二、前端JavaScript处理（无需后端，适合简单场景） #

如果不想依赖后端Servlet，可直接在前端通过JS处理表单提交完成跳转：

修改后的登录JSP页面代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>INDICES TECHNO IT PARK</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        td{
            padding: 20px;
        }
        div{
            width:90%;
            border:10px solid black;
            border-radius:20px;
            background-color: sandybrown;
        }
    </style>
    <script>
        function handleLogin() {
            // 获取选中的角色单选框
            const roleRadios = document.getElementsByName("SELECT_USER");
            let targetPage = "";
            for (let radio of roleRadios) {
                if (radio.checked) {
                    targetPage = radio.value;
                    break;
                }
            }

            // 简单验证表单非空
            const empName = document.querySelector('input[name="employeeName"]').value;
            const password = document.querySelector('input[name="Password"]').value;
            if (!empName || !password || !targetPage) {
                alert("请填写完整信息并选择角色！");
                return false;
            }

            // 跳转到对应页面
            window.location.href = targetPage;
            return false;
        }
    </script>
</head>
<body>
<div align="center">
    <h1><b><font color="Brown" size="12" style="font-family: cursive"> WELCOME TO INDICES TECHNO IT PARK!</font></b></h1>
    <h1><b><font color="Sky Blue" size="8" style="font-family: cursive"> LOGIN FORM</font></b></h1>
    <!-- 修改表单提交事件，调用JS处理方法 -->
    <form onsubmit="return handleLogin()">
        <table>
            <tr>
                <td width="30%"><b><font size="3" style="font-family: cursive">SELECT_USER</font></b></td>
                <td width="20%"><b><font color="black" size="3" style="font-family: cursive"><input type="radio" name="SELECT_USER" value="Admin.jsp">Admin</font></b></td>
                <td width="25%"><b><font color="black" size="3" style="font-family: cursive"><input type="radio" name="SELECT_USER" value="Employee.jsp">Employee</font></b></td>
                <td width="50%"><b><font color="black" size="3" style="font-family: cursive"><input type="radio" name="SELECT_USER" value="Project_Manager.jsp">Project_Manager</font></b></td>
            </tr>
            <tr>
                <td><b><font size="3" style="font-family:cursive">EMPLOYEE NAME</font></b> </td>
                <td><b><font style="font family:cursive"><input type="text" class="form-control" name="employeeName" placeholder="Employee name"/></font></b></td>
            </tr>
            <tr>
                <td><b><font size="3" style="font-family:cursive">EMPLOYEE ID</font></b> </td>
                <td><b><font style="font family:cursive"><input type="text" class="form-control" name="employeeId" placeholder="Employee ID"/></font></b></td>
            </tr>
            <tr>
                <td><b><font size="3" style="font-family:cursive">EMAIL ID</font></b> </td>
                <td><b><font style="font family:cursive"><input type="text" class="form-control" name="emailId" placeholder="Email ID"/></font></b></td>
            </tr>
            <tr>
                <td><b><font size="3" style="font-family:cursive">PASSWORD</font></b> </td>
                <td><b><font style="font family:cursive"><input type="password" class="form-control" name="Password" placeholder="Password"/></font></b></td>
            </tr>
            <tr>
                <td><b><font size="3"><font color="Black" size="10" style="font-family: cursive"><input class="btn btn-success" type="SUBMIT" value="LOGIN"/></font></font></b></td>
                <td><b><font size="3"><font color="Black" size="10" style="font-family: cursive"><input class="btn btn-success" type="RESET" value="RESET"/></font></font></b></td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>

注意：前端方案无后端验证，安全性较低，仅适合演示或简单场景，实际项目推荐使用后端Servlet方案，并添加数据库校验等安全逻辑。

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