使用Ajax实现登录验证

最新推荐文章于 2022-08-08 19:05:07 发布

boxyuan

最新推荐文章于 2022-08-08 19:05:07 发布

阅读量5.7k

点赞数 1

分类专栏： Ajax 文章标签： ajax js

本文链接：https://blog.csdn.net/boxyuan/article/details/78876933

版权

Ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

get提交方式：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

	<head>
		<title>My JSP 'loginAjax.jsp' starting page</title>
		<style type="text/css">
			body {
				text-align: center;
				background-color: #E0FFFF;
			}
			
			span {
				color: darkorange;
			}
		</style>
	</head>

	<body>
		<form action="">
			用户名：<input type="text" id="uname" name="uname" maxlength="5" /><span id="tip"></span><br /> 密 码：<input type="text" name="pwd" maxlength="10" /><span id="tip2"></span><br /> <input type="submit" value="提交" />
		</form>
		<br>
	</body>
	<script type="text/javascript">
		document.getElementById("uname").onblur = function() {
			var uname = this.value;
			if(uname.length == 0) {
				document.getElementById("tip").innerHTML = "用户名必填";
			} else {
				//uname = URLEncoder();
				//alert(uname);
				var ajax = createAjax();

				function createAjax() {
					var ajax = null;
					try {
						ajax = new ActiveXObject("microsoft.xmlhttp");
					} catch(e) {
						ajax = new XMLHttpRequest();

					}
					return ajax;
				}
				ajax.open("get", "${pageContext.request.contextPath}/LoginServlet?time=" + new Date().getDate() + "&username=" + uname);
				ajax.send(null);
				ajax.onreadystatechange = function() {
					if(ajax.readyState == 4) {
						if(ajax.status == 200) {
							var varReturn = ajax.responseText;
							document.getElementById("tip").innerHTML = varReturn;
						}
					}
				}
			}

		}
	</script>

</html>

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 {
		String un = request.getParameter("username");
		byte[] by = un.getBytes("ISO8859-1");
		un = new String(by, "UTF-8");
		String str = "用户名可以注册";
		System.out.println(un);
		if ("张三".equals(un)) {
			str = "用户名已经注册";
			System.out.println("zs");
		}
		response.setContentType("text/html;charset=utf-8");
		PrintWriter pw = response.getWriter();
		pw.print(str);
		pw.flush();
		pw.close();

	}
}

post提交方式

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title>My JSP 'loginAjax.jsp' starting page</title>
<style type="text/css">
body {
	text-align: center;
	background-color: #E0FFFF;
}

span {
	color: darkorange;
}
</style>
</head>

<body>
	<form action="">
		用户名：<input type="text" id="uname" name="uname" maxlength="5" /><span
			id="tip"></span><br /> 密 码：<input type="text" name="pwd"
			maxlength="10" /><span id="tip2"></span><br /> <input type="submit"
			value="提交" />
	</form>
	<br>
</body>
<script type="text/javascript">
	document.getElementById("uname").onblur = function() {
		var uname = this.value;
		if (uname.length == 0) {
			document.getElementById("tip").innerHTML = "用户名必填";
		} else {
			//uname = URLEncoder();
			//alert(uname);
			var ajax = createAjax();

			function createAjax() {
				var ajax = null;
				try {
					ajax = new ActiveXObject("microsoft.xmlhttp");
				} catch (e) {
					ajax = new XMLHttpRequest();

				}
				return ajax;
			}
			ajax.open("POST",
					"${pageContext.request.contextPath}/AjaxTimeServlet2?time="
							+ new Date().getDate());
			ajax.setRequestHeader("content-type",
					"application/x-www-form-urlencoded");
			ajax.send("username=" + uname);
			ajax.onreadystatechange = function() {
				if (ajax.readyState == 4) {
					if (ajax.status == 200) {
						var varReturn = ajax.responseText;
						//document.getElementById("tip").innerHTML = varReturn;
						var imaElement = document.createElement("img");
						//alert(varReturn);
						imaElement.src = varReturn;//src为servlet里面返回的字符串图片路径
						imaElement.style.width = "12px";
						imaElement.style.height = "12px";
						var spanElement = document.getElementById("tip");
						//清空span标签中的内容
						spanElement.innerHTML = "";
						//将img标签加入到span标签中
						spanElement.appendChild(imaElement);
					}
				}
			}
		}

	}
</script>

</html>

public class AjaxTimeServlet2 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;charset=UTF-8");
		String un = request.getParameter("username");
		byte[] by = un.getBytes("ISO8859-1");
		un = new String(by, "UTF-8");
		System.out.println(un);
		String img = "images/MsgSent.gif";
		System.out.println(un);

		if ("张三".equals(un)) {
			img = "images/MsgError.gif";
		}
		response.setContentType("text/html;charset=utf-8");
		PrintWriter pw = response.getWriter();
		pw.write(img);
		pw.flush();
		pw.close();
	}

}