總結之Web兩種使用者登入方式及JS資訊驗證操作——表單提交、ajax提交
阿新 • • 發佈：2019-01-24
登入大體有兩種方法一個是表單提交另一個就是ajax提交
1.表單提交
表單提交如果前端JS沒有驗證十分簡單，不詳述。
- JS驗證使用者名稱、密碼是否為空
- 其中非submit和button按鈕
submit有一些注意事項
- form中要onsubmit=“return login()” 其中“return”一定要寫
- return false;//因為這是submit表單提交 返回false 不進行請求 其中“false”要寫 button可以不用。
<script src="login/vendor/jquery/jquery-3.2.1.min.js"></script> <script> function login() { var username=$("#username").val(); if (username==""){ alert("使用者名稱不能為空！"); return false;//因為這是submit表單提交 返回false 不進行請求 }; var password=$("#password").val(); if (password==""){ alert("密碼不能為空！"); return false; } } </script> <body> <form action="loginFrom" method="post" onsubmit="return login()"> 賬戶：<input id="username" type="text"> 密碼：<input id="password" type="password"> <input type="submit" value="提交"> </form>
Button提交
<script src="login/vendor/jquery/jquery-3.2.1.min.js"></script> <script> function login() { var username=$("#username").val(); if (username==""){ alert("使用者名稱不能為空！"); return; }; var password=$("#password").val(); if (password==""){ alert("密碼不能為空！"); return; } $("#loginFrom").submit(); } </script> <body> <form action="loginFrom" method="post" id="loginFrom"> 賬戶：<input id="username" name="username" type="text"> 密碼：<input id="password" name="password" type="password"> <input type="button" value="提交" onclick="login()"> </form>
2.ajax提交
<script src="login/vendor/jquery/jquery-3.2.1.min.js"></script> <script> function login() { var username=$("#username").val(); if (username==""){ alert("使用者名稱不能為空！"); return; }; var password=$("#password").val(); if (password==""){ alert("密碼不能為空！"); return; } //$("#loginFrom").submit(); $.post("loginFrom",{username:username,password:password},function (data) { if(data=="1"){ //跳轉到成功頁面 location.href ="successPage.jsp"; }else{ alert("使用者名稱或者密碼不正確!"); } }); } </script> <body> 賬戶：<input id="username" name="username" type="text"> 密碼：<input id="password" name="password" type="password"> <input type="button" value="提交" onclick="login()">
Servlet
String username =request.getParameter("username");
String password =request.getParameter("password");
username =new String(username.getBytes("iso-8859-1"),"UTF-8");
password =new String(password.getBytes("iso-8859-1"),"UTF-8");
UserService userService=new UserServiceImpl();
User user =userService.getUserByUsernameAndPassword(username,password);
if(user!=null){
System.out.println("登入成功");
//session作用域，一次會話有效
HttpSession session=request.getSession();
session.setAttribute("user",user);
String code ="1";
response.getWriter().write(code);
//response.sendRedirect("success.html");
}else {
System.out.println("登入失敗");
String code ="0";
response.getWriter().write(code);
//response.sendRedirect("fail.html");
}