正则表达式&Ajax&Servlet 用户登录

最新推荐文章于 2022-09-17 13:03:32 发布

扰乱浮尘

最新推荐文章于 2022-09-17 13:03:32 发布

阅读量635

点赞数 1

分类专栏： js+html 文章标签：前端

本文链接：https://blog.csdn.net/q_2540638774/article/details/102741401

版权

js+html 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

一、功能介绍
1、用jsp、jQuery和ajax做个一个登录界面的判断是否登录成功，来看效果图：
a、当输入框正则表达式判断成功时，会改变登录按钮的背景色，并赋予一个可点击事件，如果用户名和密码不正确时，提示登录失败
在这里插入图片描述
b、当正则表达式有一个不成立时，按钮不改变背景色，并没有可点击事件

c、当所有条件都成立时，并且输入用户名和密码都正确时，就可以跳转界面

2、效果看完了，是不是感觉还可以，那么我们来看代码
a、首先我们先来看jsp界面代码：


<script src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/login.css" />
</head>

<body>
	<div id="div">
		<table>
			<tr>
				<th>用户名：</th>
				<td><input type="text" name="name" id="name" data-index="0" />
				</td>
			</tr>
			<tr>
				<th>密&nbsp;&nbsp;&nbsp;码：</th>
				<td><input type="text" name="pwd" id="pwd" data-index="1" />
				</td>
			</tr>
			<tr>
				<td colspan="3" id="losing"></td>
			</tr>
			<tr>
				<td colspan="3" style="text-align: center;">
					<div id="login">登 录</div></td>
			</tr>
		</table>
	</div>

b、css样式（这里我导入的是一个外部css样式）

#div {
	width: 400px;
	height: 260px;
	margin: 0px auto;
	border-radius: 20px;
	background-repeat: no-repeat;
	background-size: 470px;
	margin-top: 100px;
	background-image: url(../img/1.jpg);
}

th {
	width: 80px;
	text-align: right;
}

table {
	width: 300px;
	height: 150px;
	margin-top: 60px;
	margin-left: 50px;
	position: absolute;
}

input {
	font-size: 18px;
	width: 190px;
	border-radius: 10px;
	margin-top: 10px;
}

#login {
	width: 100px;
	height: 40px;
	background-color: #CCCCCC;
	margin-left: 100px;
	border-radius: 20px;
	line-height: 40px;
}

#losing {
	height: 30px;
	font-size: 12px;
	padding: 0px;
	text-align: center;
	color: red;
}

c、接下来就是最重要的jQuery代码和ajax代码了（代码中我自定义了几个方法分别来实现不同的功能以及效果，具体的请看注释）：

<script type="text/javascript">
		//调用getText()方法，来判断正则表达式
		getText();

		//登陆跳转事件方法
		function skip() {
			$(function() {
				$.ajax({
					url : "LoginServlet",
					type : "post",
					data : {
						name : $("#name").val(),
						pwd : $("#pwd").val(),
					},
					dataType : "text",
					success : function(data) {
						if (data == "ok") {
							window.location.href = "succeed.jsp";
							//当登录成功后，清空输入框以及span的内容
							$("#name").val("").next("span").text("");
							$("#pwd").val("").next("span").text("");
						} else {
							$("#losing").text("登录失败");
							setTimeout(function() {
								$("#losing").text("");
							}, 3000);
							//当登录失败时，清空密码输入框以及密码框后的span标签内容
							$("#pwd").val("").next("span").text("");
						}
					}
				});
			});
		}

		//登录按钮事件
		function loginBtn() {
			//判断如果两个span标签中的值等于"√√"
			if ($("span").text() == "√√") {
				//就改变按钮的背景，并添加点击事件
				$("#login").css("background-color", "chartreuse");
				$("#login").on("click", function() {
					//调用跳转事件方法
					skip();
				});
			} else {
				//否则按钮背景不变，并删除点击事件
				$("#login").css("background-color", "#CCCCCC");
				$("#login").off("click");
			}
		}
		//获取 输入框内容 与 正则表达式 做对比
		function getText() {
			var reg = [ /^[a-z]{5,12}$/, /^[a-z\d]{5,12}$/ ];
			$(":text,:password").after("<span></span>").blur(function() {
				if (reg[$(this).attr("data-index")].test($(this).val())) {
					$(this).next("span").text("√").css("color", "green");
				} else {
					$(this).next("span").text("×").css("color", "red");
				}
				//当正则表达式判断后，调用按钮事件方法
				loginBtn();
			});
		}
	</script>

</body>

d、最后就是servlet界面代码（通过登录按钮来跳转到servlet界面来判断用户名和密码是否正确）：

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


public class LoginServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		
		String name = "abcdefg";//设置一个用户名
		String pwd = "123456";//设置一个密码
		
		//获取输入框的用户名
		String ajaxName = request.getParameter("name");
		//获取输入框的密码
		String ajaxPwd = request.getParameter("pwd");
		
		HttpSession session = request.getSession();

		//判断输入框的内容是否和自定义的用户名和密码相等
		if(name.equals(ajaxName) && pwd.equals(ajaxPwd)){
			out.print("ok");
			session.setAttribute("name", ajaxName);
		}else{
			out.print("error");
		}
		out.flush();
		out.close();
	}
}

e、当登陆成功后，跳转到succeed.jsp界面：

<body>
  <%
  		String name = (String)session.getAttribute("name");
   %>
    欢迎你， <%=name %> 用户
  </body>

二、总结
这样就实现了一个使用ajax来写的登录界面的功能，谢谢浏览，希望可以帮到大家
扫下面二维码关注公众号，回复：js1025 领取该项目源代码
在这里插入图片描述

扰乱浮尘

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
正则表达式&Ajax&Servlet 用户登录

一、功能介绍1、用jsp、jQuery和ajax做个一个登录界面的判断是否登录成功，来看效果图：a、当输入框正则表达式判断成功时，会改变登录按钮的背景色，并赋予一个可点击事件，如果用户名和密码不正确时，提示登录失败b、当正则表达式有一个不成立时，按钮不改变背景色，并没有可点击事件c、当所有条件都成立时，并且输入用户名和密码都正确时，就可以跳转界面2、效果看完了，是不是感觉还可以，那...
复制链接

扫一扫