设计简单用户登录页面具体要求如下:编写html文件输入用户名和密码,编写jsp文件获取用户输入数据,如果输入用户名和密码不是“shl、111”,输出 “登录失败”并跳转回输入页面(观察利用重定向与定时跳转区别),如果输入正确输出“登录成功”信息。运行文件查看运行结果。
时间: 2024-10-23 12:13:28 浏览: 9
设计一个简单的用户登录页面,首先需要创建HTML部分,用于接收用户的输入信息,然后是JSP(JavaServer Pages)部分处理表单提交以及验证逻辑。以下是具体的步骤:
**HTML (index.html) 文件:**
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
</head>
<body>
<form action="login.jsp" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
<script>
// 如果你需要添加重定向或定时跳转功能,可以在此添加相应的JavaScript代码
</script>
</body>
</html>
```
**JSP (login.jsp) 文件:**
```jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Login Result</title>
</head>
<body>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% if (request.getParameter("username").equals("shl") && request.getParameter("password").equals("111")) { %>
<h1 style="color: green;">登录成功</h1>
<% } else { %>
<h1 style="color: red;">登录失败</h1>
<c:url var="loginUrl" value="${pageContext.request.contextPath}/index.html" />
<a href="<%= loginUrl %>">返回登录页</a>
<% } %>
</body>
</html>
```
在这个例子中,当用户点击登录后,表单的数据会被发送到login.jsp。JSP会检查用户名和密码是否匹配。如果不匹配,它会显示"登录失败",并通过`<c:url>`标签生成一个链接跳转回index.html页面,这实现了无刷新重定向。
如果你想实现定时跳转,可以在客户端(如JavaScript)设置一个定时器,但请注意这通常不是最佳实践,因为它可能导致用户体验较差。在这种情况下,更好的做法是在服务器端完成逻辑,然后简单地使用`location.href`进行重定向。
阅读全文