ajax判斷使用者輸入的密碼是否正確
阿新 • • 發佈：2018-11-24
控制層的程式碼段
@RequestMapping("CheckPass")//ajax請求後臺查詢密碼是否正確 @ResponseBody public void CheckPass(User user , HttpServletResponse response) throws IOException { User u = userService.getDetail(user.getLoginname1()); PrintWriter out = response.getWriter(); if(u.getPasswords1().equals(user.getPasswords1())) { out.print(true); }else { out.print(false); } }
jsp頁面的程式碼段
<%@ 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%>"> <title>超市賬單管理系統</title> <link rel="stylesheet" href="css/public.css"/> <link rel="stylesheet" href="css/style.css"/> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <!--頭部--> <%@include file="head.jsp" %> <!--時間--> <section class="publicTime"> <span id="time">2015年1月1日 11:11 星期一</span> <a href="#">溫馨提示：為了能正常瀏覽，請使用高版本瀏覽器！（IE10+）</a> </section> <!--主體內容--> <section class="publicMian "> <div class="left"> <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2> <%@include file="menum.jsp" %> </div> <div class="right"> <div class="location"> <strong>你現在所在的位置是:</strong> <span>密碼修改頁面</span> </div> <div class="providerAdd"> <form action="UpdatePWdServlet" method="post" onsubmit="return checkAll();"> <!--div的class 為error是驗證錯誤，ok是驗證成功--> <input type="hidden" name="loginname" value="${sessionScope.user.loginname1 }"> <div class=""> <label for="oldPassword">舊密碼：</label> <input type="password" name="passwords1" id="oldPassword" onblur="isExist(this)"/> <span id="pid"></span> </div> <script type="text/javascript"> function createXmlHttpRequest(){//ajax // 相容寫法 //如果是 IE7+,FF等高階瀏覽器 if(window.XMLHttpRequest) { return new XMLHttpRequest(); }else //如果是IE 5,IE6低版本瀏覽器 if( window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } } var req; function isExist(obj){ var pass=obj.value;//使用者輸入的原密碼 alert(pass); //建立xmlHttpRequest物件 req=createXmlHttpRequest(); var loginname="${sessionScope.user.loginname1}"; //設定回撥函式 req.onreadystatechange=okCallme; var url="CheckPass?loginname1="+loginname+"&passwords1="+pass; //初始化 alert(url); req.open("get",url,true); //傳送請求 req.send(null); } var is; function okCallme(){ if(req.readyState==4 && req.status==200){ if(req.responseText=="true"){ document.getElementById("pid").innerHTML = "<span style='color: green'>密碼正確！</span>"; is=true; }else{ document.getElementById("pid").innerHTML = "<span style='color: red'>密碼錯誤！</span>"; is=false; } } } function checkUnique(){ var input=document.getElementById("newPassword").value; var reinput=document.getElementById("reNewPassword").value; if(input==reinput){ document.getElementById("reNewPass").innerHTML="兩次密碼輸入一致"; return true; }else{ document.getElementById("reNewPass").innerHTML="<span style='color: red'>兩次密碼輸入不一致</span>"; return false; } } function checkAll(){ if(checkUnique() && is){ return true; }else{ return false; } } </script> <div> <label for="newPassword">新密碼：</label> <input type="password" name="newPassword" id="newPassword" /> <span >*請輸入新密碼</span> </div> <div> <label for="reNewPassword">確認新密碼：</label> <input type="password" name="reNewPassword" id="reNewPassword" onblur="checkUnique()"/> <span id="reNewPass"></span> </div> <div class="providerAddBtn"> <input type="submit" value="儲存" /> <input type="button" value="返回" onclick="history.back(-1)"/> </div> </form> </div> </div> </section> <%@include file="foot.jsp" %> <script src="js/time.js"></script> </body> </html>