Ajax之注册表单校验用户是否注册

最新推荐文章于 2022-12-05 00:51:31 发布

飘渺时光

最新推荐文章于 2022-12-05 00:51:31 发布

阅读量203

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/zhang_09_11/article/details/86434984

版权

Java Web 专栏收录该内容

81 篇文章 1 订阅

订阅专栏

jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'ajax3.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

</head>

<script type="text/javascript">
	//创建异步对象
	function createXMLHttpRequest() {
		try {
			return new XMLHttpRequest();
		} catch (e) {
			try {
				return ActiveXObject("Msxm12.XMLHTTP"); //IE6.0
			} catch (e) {
				try {
					return ActiveXObject("Microsoft.XMLHTTP"); //IE5.5以下版本
				} catch (e) {
					alert("请问你用的是什么浏览器？");
					throw e;
				}
			}
		}
	}
	;
	window.onload = function() {
		var username = document.getElementById("p1");
		username.onblur = function() {
			//1.得到异步对象
			var xmlHttp = createXMLHttpRequest();
			//2.打开连接
			xmlHttp.open("POST", "/Demoajax/BServlet", true);
			//3.设置请求
			xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			//4.发送请求
			xmlHttp.send("username=" + username.value);
			//5.给xmlHttp的onreadystatechange事件注册监听
			
			xmlHttp.onreadystatechange = function() {
				if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //双重判断
					//获取服务器的响应
					var text = xmlHttp.responseText;
					var span = document.getElementById("error");
					if (text == 1) {
						span.innerHTML = "用户名已被注册";
					} else {
						span.innerHTML = "";
					}
				}
			}
		}

	}
</script>

<body>
	<form action="/BServlet" method="post">
		用户名： <input type="text" name="username" value="" id="p1" /><span id="error"></span><br/> 
		密 码：<input type="password" name="pwd" value="" id="p2" /><br /> 
		<input type="submit" value="注册" />
	</form>
</body>
</html>

对应的Servlet:

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//获取表单参数
		String usernameString=request.getParameter("username");

		//如果用户名为zhangsan,提交成功，响应状态为1否则响应0
		if(usernameString.equalsIgnoreCase("zhangsan")){
			response.getWriter().print("1");
		}
		else{
			response.getWriter().print("0");
		}