设计简单用户登录页面具体要求如下:编写html文件输入用户名和密码,编写 jsp文件获取用户输入数据,如果输入用户名和密码不是“shl、111”,输出“登录失败”并跳转回输入页面(观察利用重定向与定时跳转区别),如果输入正确输出“登录成功”信息
时间: 2024-10-23 16:12:38 浏览: 9
设计一个简单的用户登录页面需要考虑以下几个步骤:
1. HTML部分 (index.html):
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<title>用户登录</title>
</head>
<body>
<form action="login.jsp" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br>
<input type="submit" value="登录">
</form>
<script>
// 如果你想通过JavaScript实现定时跳转,可以添加一个定时函数
// 例如:setTimeout(() => window.location.href = "login.jsp?timer=true", 5000); // 每5秒重定向
</script>
</body>
</html>
```
2. JSP部分 (login.jsp):
```jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录结果</title>
</head>
<body>
<%@ page import="javax.servlet.http.HttpServletRequest" %>
<% HttpServletRequest request = (HttpServletRequest) pageContext.getRequest(); %>
<% String username = request.getParameter("username");
String password = request.getParameter("password"); %>
<% if ("shl".equals(username) && "111".equals(password)) { %>
<h2 style="color:green;">登录成功</h2>
<% } else if (!request.getParameter("timer").equals(null)) { %>
<!-- 这里判断是否是定时跳转 -->
<script>window.location.href = "index.html";</script>
<h2 style="color:red;">登录失败</h2>
<% } else { %>
<h2 style="color:red;">登录失败</h2>
<% } %>
</body>
</html>
```
在这个例子中,当用户提交表单后,`login.jsp`会接收到用户名和密码,并进行检查。如果验证通过,显示"登录成功";如果没有输入正确的用户名和密码,且存在`timer`参数(即定时跳转),则会跳回首页显示"登录失败";其他情况也显示"登录失败"。
阅读全文