javaweb基础----使用ajax校验用户名是否重复

首先是前端js的代码：

 1  <script type="text/javascript">
 2         function checkForm(){
 3             //1.验证用户名不能为空
 4             var userName = document.getElementById("userName").value;
 5             if(userName==""){
 6                  var tip1 = document.getElementById("tip1");
 7                 tip1.innerHTML = "用户名不能为空！";
 8                 //alert("用户名不能为空！")
 9                 return false;
10             };
11             //2.验证昵称不能为空
12             var nickName = document.getElementById("nickName").value;
13             if(nickName==""){
14                  var tip2 = document.getElementById("tip2");
15                 tip2.innerHTML = "昵称不能为空！";
16                 //alert("用户名不能为空！")
17                 return false;
18             };
19               //3.验证密码不能为空
20             var pwd = document.getElementById("pwd").value;
21             if(pwd==""){
22                  var tip3 = document.getElementById("tip3");
23                 tip3.innerHTML = "密码不能为空！";
24                 //alert("用户名不能为空！")
25                 return false;
26             };
27             //4.验证两次密码是否一致
28             var repwd = document.getElementById("repwd").value;
29             if(pwd!=repwd){
30                  var tip4 = document.getElementById("tip4");
31                 tip4.innerHTML = "两次密码不一致！";
32                 //alert("用户名不能为空！")
33                 return false;
34             };
35             //5.验证验证码不能为空
36             var code = document.getElementById("code").value;
37             if(code==""){
38                  var tip5 = document.getElementById("tip5");
39                 tip5.innerHTML = "验证码不能为空！";
40                 //alert("用户名不能为空！")
41                 return false;
42             };
43             //6.修改全局变量exist的值
44             if(exist){
45                 return false;
46             }
47             return true;
48         }
49         //7.后端数据传回的校验信息
50         if("${msg }"){
51             alert("${msg }")
52         }
53         //定义全局变量exist，用于表示用户名是否存在，默认不存在
54         var exist = false;
55         // 获取XMLHttpRequest对象
56         function getXMLHttpRequest() {
57             var xmlhttp;
58             // code for IE7+, Firefox, Chrome, Opera, Safari
59             if (window.XMLHttpRequest) {
60                 xmlhttp = new XMLHttpRequest();
61             }
62             // code for IE6, IE5
63             else {
64                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
65             }
66             return xmlhttp;
67         }
68             //7.利用ajax检测用户名是否重复
69             function  checkName(username) {
70                 if(username){
71                     //1.获取XmlHttpRequest对象
72                     var xhr = getXMLHttpRequest();
73                     //2.监听服务器返回状态
74                     xhr.onreadystatechange = function(){
75                         if(xhr.readyState==4&&xhr.status==200){
76                             //3.获取后台返回的结果
77                             var data = xhr.responseText;
78                             //判断返回信息
79                             if(data=="1"){
80                                 //data=="1"，用户名可用，表单可提交
81                                 document.getElementById("tip12").innerHTML="用户名可用";
82                                 exist = false;
83                             }else{
84                                 //data==其它，用户名不可用，表单不可提交
85                                 document.getElementById("tip11").innerHTML="用户名不可用";
86                                 exist = true;
87                             }
88                         }
89                     }
90                     //4.发送请求
91                     xhr.open("POST","${root }/checkNameServlet",true);
92                     // 使用表单的方式 POST 数据
93                     xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
94                     xhr.send("username="+username);
95                 }
96             }
97     </script>

然后是表单中的form设置：

1 <form action="${root }/registerServlet" method="post" onsubmit="return checkForm();" id="registForm">
2             <dl class="register_row">
3                 <dt>用户名：</dt>
4                 <dd><input id="userName" name="username" class="register_input" onblur="checkName(value)"/><font id="tip11" color="red"></font><font id="tip12"color="green"></font></dd>
5             </dl>

说明:重点看43-46行，53行，79-86行。

后端代码：

1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
2         String username = request.getParameter("username");
3         UserService us =new  UserServiceImpl();
4         String data = us.check(username);
5         response.getWriter().write(data);
6     }

先想再做，不想不做。