超简单的Web登陆界面跳转

界面跳转

效果描述: 用户在index.jsp输入用户名和密码,若两者都是与预置信息匹配(check.jsp)则跳转到login.jsp,否则跳回到登陆界面index.jsp

在这里插入图片描述

进行网页跳转,有两种方法 。

1 jsp页面+java代码编写: 需要用<%%>标签隔开,代码比较杂乱。
index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>My JSP 'index.jsp' starting page</title>
  </head>
  
  <body>
    <form action="check.jsp" method="post" name="frm">
     用户名:<input type="text" name="txtname" id="txtname" style="width=120px">
     <br>
     密码:<input type="password" name="txtpwd" id="txtpwd"style="width=120px">
     <br>
     <input type="submit" name="smt" id="login" >
     <input type="reset" name="rst" id="reset" >
    </form>
  </body>
</html>

check.jsp:

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  <body>
  <%
  request.setCharacterEncoding("utf-8");
  String user_name=request.getParameter("txtname");//获取用户名字
  String user_pwd=request.getParameter("txtpwd");//获取用户密码
  if(user_name.equals("佳")&& user_pwd.equals("123")){
  %>
  <jsp:forward page="login.jsp">
  	<jsp:param value="<%=user_name %>" name="t_u_name"/>
  </jsp:forward>
 
  <% 
  }else{%>
<jsp:forward page="index.jsp"/>
 <% }
  %>
    This is my JSP page. <br>
  </body>
</html>

login.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>
<head> 
<title>登录</title>
</head>
<body>
<%
String uname=request.getParameter("t_u_name");
out.println("welcome "+ uname + " login!");
 %>

</body> 
</html>

效果:
在这里插入图片描述

可以看到,当用户信息不匹配时,本应该跳转回index.jsp页面的却留在check.jsp页面上。
2 cookie 服务器跳转
sessionuser.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'index.jsp' starting page</title>

  </head>
  
  <body>
    <form action="sessioncheck.jsp" method="post" name="frm">
     用户名:<input type="text" name="txtname" id="txtname" style="width=120px">
     <br>
     密码:<input type="password" name="txtpwd" id="txtpwd"style="width=120px">
     <br>
     <input type="submit" name="smt" id="login" >
     <input type="reset" name="rst" id="reset" >
    </form>
  </body>
</html>

sessioncheck.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  <body>
  <%
  request.setCharacterEncoding("utf-8");
  response.setContentType("text/html; charset=utf-8"); 
  String user_name=request.getParameter("txtname");//获取用户名字
  String user_pwd=request.getParameter("txtpwd");//获取用户密码
  if(user_name.equals("佳")&& user_pwd.equals("123")){
	session.setAttribute("t_u_name", user_name);
	response.sendRedirect("sessionlogin.jsp");
  }else{

 	response.sendRedirect("sessionuser.jsp");
  
  }
   %>
    This is my JSP page. <br>
  </body>
</html>

sessionlogin.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>
<head> 
<title>登录</title> 
</head>
<body>

welcome <%=session.getAttribute("t_u_name")%> login!

</body> 
</html>

效果:
在这里插入图片描述
cookie机制下就回跳转回user.jsp,但是大概是浏览器的原因,跳回去的时候默认的正确信息已经填好了。


注意点:

  • 输入输出涉及到中文字符,记得把字符集改成UTF-8
  • 表单中想要input中文字符,要记得加这条语句: request.setCharacterEncoding("utf-8");
  • 10
    点赞
  • 109
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,实现一个简单登陆界面需要以下步骤: 1. 创建一个HTML文件,命名为index.html。 2. 在HTML文件中添加一个表单元素,用于输入用户名和密码。可以使用input元素,设置type属性为text和password。 3. 在表单中添加一个提交按钮,用于提交登陆信息。可以使用input元素,设置type属性为submit。 4. 在HTML文件中添加一个CSS样式表,用于美化登陆界面。可以设置背景颜色、字体、字号、边框等样式。 5. 在表单中添加JavaScript脚本,用于验证用户名和密码是否正确。可以使用if语句判断输入的用户名和密码是否与预设值相同,如果相同则跳转到登陆成功页面,否则提示用户名或密码错误。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; font-size: 14px; padding: 0; margin: 0; } form { background-color: #fff; border: 1px solid #ccc; padding: 20px; width: 300px; margin: 50px auto; } input[type="text"], input[type="password"] { display: block; margin: 10px 0; padding: 5px; width: 100%; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; } input[type="submit"] { background-color: #007bff; color: #fff; border: none; border-radius: 3px; padding: 10px; font-size: 14px; cursor: pointer; } input[type="submit"]:hover { background-color: #0062cc; } </style> <script> function validateForm() { var username = document.forms["loginForm"]["username"].value; var password = document.forms["loginForm"]["password"].value; if (username == "admin" && password == "admin123") { window.location.href = "success.html"; } else { alert("Username or password is incorrect."); } return false; } </script> </head> <body> <form name="loginForm" onsubmit="return validateForm()"> <label for="username">Username:</label> <input type="text" id="username" name="username"> <label for="password">Password:</label> <input type="password" id="password" name="password"> <input type="submit" value="Submit"> </form> </body> </html> ``` 在浏览器中打开index.html文件,即可看到一个简单登陆界面。在输入正确的用户名和密码后,页面会跳转到success.html页面。如果输入错误的用户名或密码,则会弹出一个提示框。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值