js--登入身份驗證
阿新 • • 發佈：2018-11-07
js--登入身份驗證
今天來簡單實現一下簡單的登入頁面，然後呼叫後臺資料庫來驗證一下身份資訊。
先來看下程式碼
HTML：
<html> <head> <title>登陸頁面</title> <link href="../CSS/login.css" rel="stylesheet" type="text/css"/> <script src="../Source/jquery.js"></script> <script src="../JS/login.js"></script> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" > <div class="div_body"> <div class="div_bodyin"> <div class="div_log"> <img src="../Source/02.png" style="position:relative;left:92px; width:200px; height:46px;opacity:0.5" /> </div> <div class="div_login"> <h2>USERNAME</h2> <label> <input type="text" name="textfield1" id="username" class="txt_input txt_input2" onfocus="if (value =='Your name'){value =''}" onblur="if (value ==''){value='Your name'}" value="Your name"> </label> <h2>PASSWORD</h2> <label> <input type="password" name="textfield2" id="userpwd" class="txt_input" onfocus="if (value =='******'){value =''}" onblur="if (value ==''){value='******'}" value="******"> </label> <label> <input type="submit" class="sub_button" name="button" id="button" value="SIGN-IN" style="opacity: 0.7" onclick="load()"> </label> </div> </div> </div> <script> </script> </body> </html>
CSS：
body{ background:#fff url(../Source/01.gif) ; } .div_body{ width:1910px; height:500px; } .div_bodyin{ width: 403px; margin: 0 auto; position:relative; margin-top:200px; height: 375px; } .div_log{ width: 403px; height:46px; margin-bottom:25px; background:#fff url(../Source/01.gif) ; } .div_login{ height:302px; overflow:hidden; font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding: 28px 47px 20px 47px; background:url(../Source/03.png) no-repeat; color: #4f5d80; font-weight: normal; } .txt_input{ width: 295px; height: 36px; border: 1px solid #cad2db; font-size: 14px; color: #717171; font-family: Arial; margin-bottom: 20px; cursor: text; border-radius: 5px; } .sub_button{ float: right; width: 122px; height: 32px; background: url(../Source/04.png) no-repeat -153px -850px; border: none; color: #FFF; padding-bottom: 2px; font-size: 14px; font-weight: bold; }
JS：
function load(){ name=$("#username").val(); password=$("#userpwd").val(); var s ={ "name":name, "pwd":password }; $.ajax({ type:"post", url:"http://localhost/HBUweb/Login", data:s, cache: false, async : false, success: function (data ,textStatus, jqXHR) { var x = Number(data); if(x>=1){ window.location.href="./success.html"; } else{ alert("error"); } }, error:function (XMLHttpRequest, textStatus, errorThrown) { alert("failed"); } }) }
servlet：
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8");
response.setContentType("text/plain; charset=utf-8");
String user=request.getParameter("name");
String pwd=request.getParameter("pwd");
System.out.println(user+"-----------------"+pwd);
String select="select count(*) from user where UserName = '"+user+"' and Password = '"+pwd+"'";
int a=operatedatabase.validate(select);
if(a==1) {
request.getSession().setAttribute("UserName", user);
}
response.getWriter().write(String.valueOf(a));看下頁面及效果：
當輸入的使用者名稱於密碼和後臺資料庫不匹配的時候會彈框，當匹配的時候會跳轉到其他頁面。
當然這個跳轉成功的頁面只是個例子。。。
注意事項：
- 從後臺呼叫的sql語句要書寫正確。
- servlet要確定要往前臺傳什麼資料型別。常用的有response.setContentType("application/json")json格式字串response.setContentType("text/palin")向前臺傳純文字。此時要注意：如果你要傳遞一個整數，先把他變成字串。要不傳到前臺就會變成一個點。神奇吧。。
- 最後來講一下一個巨大的坑：比如你查的是判斷是否有某個人的資訊。最後返回一個整型值。在查詢資料庫的時候先對結果集resultset篩選結果。可以這樣寫{while(rs.next){int count=rs.getint(1); return count}}可以這樣寫{if(rs!=null){rs.next(),int count=rs.getint(1)}}。第二種方法注意getint的引數是1，就是得到的是第二列。第一列被行號佔了。這樣才能查到聚合函式count的值