不需要刷新页面自动实现用户名是否存在的判定

最新推荐文章于 2019-12-12 16:33:59 发布

最新推荐文章于 2019-12-12 16:33:59 发布 · 193 阅读

文章标签：

#DWR #JSP #Ajax #DAO #Microsoft

Ajax 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个无需页面刷新即可完成用户名验证的功能实现方案。通过JavaScript进行客户端处理，利用AJAX技术发送HTTP请求到服务器端进行验证，并根据服务器返回的状态码显示验证结果。此方案提升了用户体验并简化了开发流程。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>不需要页面刷新的数据更新程序</title>
<script type="text/javascript">
	function check_user_exists()
	{
		u_name=document.getElementById("u_name").value;
		if (u_name == null || u_name == '')
		{
			alert("请您输入用户名");
			return false;
		}
		infoBoard=document.getElementById("checkInfo");
		infoBoard.innerText='查询中...';
		myurl="validation.jsp?u_name="+u_name;
		retCode=openUrl(myurl);
		//alert(typeof(retCode));
		code=parseInt(retCode);
		switch(code)
		{  
			case -2:
				infoBoard.innerHTML='<font color=red>抱歉</font>,查询失败';break;
			case 1:
				infoBoard.innerHTML='<font color=red>恭喜</font>,'+u_name+'可以使用';
				break;
			case 0:
				infoBoard.innerHTML='<font color=red>抱歉</font>，用户名'+u_name+'已经被使用';
				break;
		}
		return true;
	}

	function openUrl(url)
	{	
		var xmlHttp=new ActiveXObject("Microsoft.XMLHttp")
		xmlHttp.open("GET",url,false);
		xmlHttp.send();
		retInfo=xmlHttp.responseText;
		if(xmlHttp.readyState==4)
		{
			if (xmlHttp.status=="200")
			{
				return retInfo;
			}
			else
			{
				return "-2";
			}
		}
	}
</script>
</head>
<body>
<form name="form1" action="" method="post">
username:<input type=text id="u_name" onblur="check_user_exists();"><span id="checkInfo"></span> <br>
password:<input type=password id="pwd">
<input type=button name="checkuser" value="检测用户是否存在" onClick="check_user_exists();">
</form>
</body>
</html>

validation.jsp

<%@ page import="java.io.PrintWriter" %>
<%

	String u_name = request.getParameter("u_name");
	PrintWriter pw=response.getWriter();
	if(u_name.equals("tom"))
	{	
		pw.println(0);
	}
	else
	{
		pw.println(1);	
	}

%>