javaweb注册页面学习之路(三)
2017-08-24 16:44 圣二十一郎 阅读(173) 评论(0) 编辑 收藏 举报本次重构优化内容
1 使用AJAX技术
2 后台输出JSON格式数据到前台
- 通用ajax.js文件
1 var xmlHttp = null; 2 var succCallbackEvent = null; 3 var failCallbackEvent = null; 4 5 function createXMLHttp() { 6 7 //判断浏览器是否支持ActiveX控件，针对IE6及之前版本 8 if (window.ActiveXObject) { 9 //将所有可能出现的ActiveXObject版本都放在一个数组中 10 var arrXmlHttpTypes = [ 'Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 11 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 12 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP' ]; 13 //通过循环创建XMLHttpRequest对象 14 for (var i = 0; i < arrXmlHttpTypes.length; i++) { 15 try { 16 //创建XMLHttpRequest对象 17 xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]); 18 //如果创建XMLHttpRequest对象成功，则跳出循环 19 break; 20 } catch (ex) { 21 } 22 } 23 24 } 25 //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，Firefox，Opera等浏览器 26 else if (window.XMLHttpRequest) { 27 xmlHttp = new XMLHttpRequest(); 28 29 } 30 } 31 32 function callback() { 33 if (xmlHttp.readyState == 4) { 34 if (xmlHttp.status == 200) { 35 succCallbackEvent(xmlHttp.responseText); 36 } else { 37 failCallbackEvent("AJAX服务器返回错误！"); 38 } 39 } 40 } 41 42 function ajaxSubmit(method, url, sendvalue, succCallback, failCallback) { 43 createXMLHttp(); 44 succCallbackEvent = succCallback; 45 failCallbackEvent = failCallback; 46 if (xmlHttp != null) { 47 xmlHttp.onreadystatechange = callback; 48 xmlHttp.open(method, encodeURI(url), true); 49 if (method == 'post') 50 { 51 xmlHttp.setRequestHeader('Content-type', 52 'application/x-www-form-urlencoded'); 53 } 54 xmlHttp.send(sendvalue); 55 } else { 56 //alert("您的浏览器不支持XMLHTTP"); 57 return false; 58 } 59 return true; 60 }
- userReg.jsp 用户注册页面
1 <script type="text/javascript"> 2 function addsuccfun(result){ 3 var strJson = eval('(' + result + ')'); 4 if(strJson.RegResult == -1){ 5 alert(strJson.RegResultInfo); 6 }else{ 7 //显示注册成功 跳转到登录窗口 8 alert("注册成功 !"); 9 window.location.href='login.jsp'; 10 } 11 } 12 13 function failfun(result){ 14 alert(result); 15 } 16 17 function surePost() { 18 var strValues; 19 if (document.RegForm.userNum.value == "") { 20 alert("用户名不能为空!"); 21 return false; 22 } 23 strValues = '&userNum=' + document.RegForm.userNum.value; 24 if (document.RegForm.userPwd.value == "") { 25 alert("密码不能为空!"); 26 return false; 27 } 28 strValues = strValues + '&userPwd=' + document.RegForm.userPwd.value; 29 if (document.RegForm.userPwd.value != document.RegForm.userConfirmPwd.value) { 30 alert("密码和确认密码输入不一致!"); 31 return false; 32 } 33 strValues = strValues + '&userConfirmPwd=' + document.RegForm.userConfirmPwd.value; 34 strValues = strValues + '&userName=' + document.RegForm.userName.value; 35 strValues = strValues + '&userEmail=' + document.RegForm.userEmail.value; 36 ajaxSubmit('get', 'UserSvt2?xtype=0' + strValues, null, addsuccfun, failfun); 37 } 38 </script>
1 <body> 2 3 <form name="RegForm"> 4 <table> 5 <tr> 6 <td align="right">用户名:</td> 7 <td width="150px"><input type="text" name="userNum" 8 style="width: 150px" /></td> 9 </tr> 10 <tr> 11 <td align="right">姓名:</td> 12 <td><input type="text" name="userName" style="width: 150px" /></td> 13 </tr> 14 <tr> 15 <td align="right">电子邮箱:</td> 16 <td><input type="text" name="userEmail" style="width: 150px" /></td> 17 </tr> 18 <tr> 19 <td align="right">密码:</td> 20 <td><input type="password" name="userPwd" 21 style="width: 150px" /></td> 22 </tr> 23 <tr> 24 <td align="right">确认密码:</td> 25 <td><input type="password" name="userConfirmPwd" 26 style="width: 150px" /></td> 27 </tr> 28 <tr> 29 <td><input type="button" value="注册" onclick = "surePost()"></td> 30 </tr> 31 </table> 32 </form> 33 34 </body>
- 后台Servlet
1 protected void doGet(HttpServletRequest request, HttpServletResponse response) 2 throws ServletException, IOException { 3 int nXType = Integer.parseInt(request.getParameter("xtype")); 4 if (nXType == 0) { 5 response.setCharacterEncoding("utf-8"); 6 UserItem userItem = new UserItem(); 7 userItem.setStrUserNum(request.getParameter("userNum")); 8 userItem.setStrUserName(TCommonTool.GetUTF8(request.getParameter("userName"))); 9 userItem.setStrPwd(request.getParameter("userPwd")); 10 userItem.setStrEmail(request.getParameter("userEmail")); 11 12 if (!userItem.getStrPwd().equals(request.getParameter("userConfirmPwd"))) { 13 14 PrintWriter out = response.getWriter(); 15 out.write("{"); 16 out.write("\"RegResult\":-1,"); 17 out.write("\"RegResultInfo\":\"密码和确认密码输入不一致.\""); 18 out.write("}"); 19 out.flush(); 20 out.close(); 21 return; 22 } 23 24 DBUser dbUser = new DBUser(); 25 dbUser.GetUser(userItem); 26 27 if (userItem.getStrGUID().equals("")) { 28 29 userItem.setStrGUID(java.util.UUID.randomUUID().toString()); 30 dbUser.AddUser(userItem); 31 PrintWriter out = response.getWriter(); 32 out.write("{\"RegResult\":1}"); 33 out.flush(); 34 out.close(); 35 36 } else { 37 38 PrintWriter out = response.getWriter(); 39 out.write("{"); 40 out.write("\"RegResult\":-1,"); 41 out.write("\"RegResultInfo\":\"用户名" + userItem.getStrUserNum() + "已经存在.\""); 42 out.write("}"); 43 out.flush(); 44 out.close(); 45 46 } 47 } 48 49 }
