javaweb jsp&xml/xhr 注册界面用户名的实时js验证 表单进行再验证提交

												<!-- 表单进行验证再进行提交 -->
<form action="UserServlet" method="post" onsubmit="return checkForm()">
<input type="hidden" name="action" value="registe">
<h2>注册 <strong>用户</strong> </h2>
<label for="username">用户名</label>
<font color="red" id="user_nameMSG"></font>  /*提示消息：已存在、可注册、不为空*/
<input type="text" id="username" onblur="checkUname()" name="user_name" >

<label for="password">密码</label>
<input type="password" id="password" name="user_pass" >
<button type="submit">注册</button>
</form>

 下面是js的代码

 <script type="text/javascript">
        	var xhr;
        	var checkUnameFlag=0;
        	function checkUname(){
        		var uname = document.getElementById("username").value;
        		if(uname!=""){
            		xhr = new XMLHttpRequest();
            		xhr.open("POST", "UserServlet?action=checkUname&user_name="+uname);
            		xhr.onreadystatechange = checkUn;
            		xhr.send();
        		}

        		console.log("测试代码...");
        	}
        	
        	function checkUn(){
        		if(xhr.status == 200 && xhr.readyState == 4){
        			var result = xhr.responseText;
        			console.log(result);
        			
        			var resultByjson = eval("("+result+")");
        			
        			checkUnameFlag=resultByjson.msg_code;
        			document.getElementById("user_nameMSG").innerHTML=resultByjson.msg;
        		}
        	}
        	
        	function checkForm(){
        		var uname = document.getElementById("username").value;
        		if(uname == ""){
        			document.getElementById("user_nameMSG").innerHTML="用户名不能为空";
        			return false;
        		}else{
        			if(checkUnameFlag == 0)
        				return false;
        		}
        		return true;
        	}
        </script>

 /* xhr.open(method, url, async, username, password)

                                         async：默认 true 同意异步处理 需要调用onreadystatechange

                                         当 xhr 发生改变时会触发它,仅在状态为4时执行; */

 // xhr.status HTTP状态吗 == 200 and  xhr.readyState ==4    is the sign of success

                        var res = xhr.responseText;

                        /* 作为响应主体被返回的文本(文本形式)*/

                        console.log(res);

扫描二维码关注公众号，回复： 4855097 查看本文章

在UserServlet?action=checckUname&user_name=uname所跳转的

在Servlet中：用PrintWriter文本输出流

PrintWriter out = resp.getWriter();

out.print(res);