javaweb基础

您所在的位置：网站首页 › ajax实现注册时用户名不重复怎么办 › javaweb基础

javaweb基础

2024-07-17 13:05| 来源: 网络整理| 查看: 265

首先是前端js的代码：

1 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

然后是表单中的form设置：

1 2 3 用户名： 4 5

说明:重点看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 }

【本文地址】

javaweb基础

javaweb基础

今日新闻

推荐新闻