使用jqeury+Ajax进行用户名验证 -

青春的、脚步

浏览: 39410 次
性别:
来自: 武汉

最近访客更多访客>>

超爱你的笑

dwd_china

旺仔小呆

yym2856230

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (70)

社区版块

存档分类

使用jqeury+Ajax进行用户名验证

准备jquery库！

注册页面！

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
	<head>
		<title>
			注册
		</title>
		<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">

	
	function UserNameCheck()
	{
 
        	$.ajax({
					type:"GET",
					url:"doAjax.jsp",
					dataType:"html",
					data:"user_name="+$("#username").val(),
					
					    beforeSend:function(XMLHttpRequest){
        		$("#check_username").text("querying ,please wait");
        			},
        			
        			    success:function(meg){
        				$("#check_username").html(meg);
        		$("#check_username").css("color","red");
        		//$("#check_username").css("css","red");
        			    },

        			    complete:function(XMLHttpRequest,textState){

             			    },
						error:function(){
//  error option 
        						}
         		
    				});		 }
	
	
 
	
	</script>

	</head>


	<body>
		<div align="center">
			<form name="regForm" method="post" action="doAjax.jsp">
				<table width="70%" border="1">
					<tr align="center">
						<td colspan="2">
							用户注册
						</td>
					</tr>
					<tr>
						<td width="24%" align="center">
							用户名:
						</td>
						<td width="76%">
							<input name="username" type="text" id="username" onBlur="UserNameCheck()">
							<span id="check_username"></span>
						</td>
					</tr>
					<tr>
						<td align="center">
							密码:
						</td>
						<td>
							<input name="password" type="password" id="password">
							
						</td>
					</tr>
					<tr>
						<td align="center">
							重复密码:
						</td>
						<td>
							<input name="repassword" type="password" id="repassword">
							
						</td>
					</tr>
					<tr>
						<td align="center">
							email:
						</td>
						<td>
							<input name="email" type="text" id="email">
						</td>
					</tr>
					<tr align="center">
						<td colspan="2">
							<input type="button" name="Submit" value="按钮" onClick="Form_Submit()">
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

jqury+ajax代码！

function UserNameCheck()
	{
 
        	$.ajax({
					type:"GET",
					url:"doAjax.jsp",
					dataType:"html",
					data:"user_name="+$("#username").val(),
					
					    beforeSend:function(XMLHttpRequest){
        		$("#check_username").text("querying ,please wait");
        			},
        			
        			    success:function(meg){
        				$("#check_username").html(meg);
        		$("#check_username").css("color","red");
        		//$("#check_username").css("css","red");
        			    },

        			    complete:function(XMLHttpRequest,textState){

             			    },
						error:function(){
//  error option 
        						}
         		
    				});		 }

处理请求用户请求的JSP代码！

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/xml" 
  %>
 <%!String[]	usernameList = new String[] { "Tom", "Jerry", "Brain" }; %>
<%!	//声明方法用来判断用户名是否已经存在
public boolean isContain(String param) {
	for (int i = 0; i < usernameList.length; i++) {
		if (usernameList[i].equals(param)) {
			return true;
		} else
			continue;
	}

	return false;
} %>
<%
String username = (String) request.getParameter("user_name");

String xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";

if (username.equals("") || username == null) {
	
	xml +="<message><info>Username is required !</info></message>";
}else if(this.isContain(username))
{
	xml += "<message><info>The username has exsites,Please choose other username!</info></message>";
}
else
{
	xml += "<message><info>合法!</info></message>";
}
//
System.out.print(xml);
response.getWriter().write(xml);

%>

鼠标onblur事件会触发函数调用！

分享到：