<%@ 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%>"> <style type="text/css"> .error { color: red; } .success { color: green; } </style> </head> <body> <form action="register" method="post"> 用户名：<input id="uid" type="text" name="username" onblur="checkUnameUnique();"><span id="uspan"></span><br /> 密码：<br /> .....<br /> <input type="submit" value="注册" /> </form> <!-- <script type="text/javascript"> function checkUnameUnique(){ //不希望用户在点击注册以后才验证用户名的唯一性，所以使用ajax将用户名发送到后台进行数据的唯一验证 //1.获取用户输入的内容 var userinput = document.getElementById("uid").value; //2.发送ajax var xhr = new XMLHttpRequest(); xhr.open("get","unique?username="+userinput,true); xhr.send(null); //3.处理来自服务器的数据 xhr.onreadystatechange = function(){ if(xhr.readyState ==4 && xhr.status == 200){ var servertext = xhr.responseText; //console.log(servertext); eval("var msg=" + servertext); //将字符串解析为js代码，并执行js代码 if(msg.msgId == "1"){ document.getElementById("uspan").className = "error"; document.getElementById("uspan").innerHTML = msg.msgContent; }else if(msg.msgId == "0"){ document.getElementById("uspan").className = "success"; document.getElementById("uspan").innerHTML = msg.msgContent; }else if(msg.msgId == "-1"){ document.getElementById("uspan").className = "error"; document.getElementById("uspan").innerHTML = msg.msgContent; } } } } </script> --> <script src="js/jquery.min.js"></script> <script type="text/javascript"> function checkUnameUnique(){ $.ajax( {url:"unique", type:"get", async:true, dataType:"json", success:function(data){ if(data.msgId == "1"){ document.getElementById("uspan").className = "error"; document.getElementById("uspan").innerHTML = data.msgContent; } } }); } </script> </body> </html>