jquery+ajax實現使用者登入案例
阿新 • • 發佈：2018-11-19
jQuery.get(url, [data], [callback], [type]);
url : 待載入頁面的URL地址
data : 待發送 Key/value 引數。
callback : 載入成功時回撥函式。
type : 返回資料的型別，xml, html, script, json, text, _default。
jQuery.post(url, [data], [callback], [type]); --> post提交和get提交引數一樣
前臺頁面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery+ajax實現登入</title> <script type="text/javascript" src="js/jquery/jquery-1.11.2.js"></script> <script type="text/javascript"> $(function(){ $("#loginBtn").click(function(){ var username = $("#username").val();//取值 var password = $("#password").val(); if(!username){ alert("使用者名稱必填!"); $("#username").focus();//獲取焦點 return ; } if(!password){ alert("密碼必填!"); $("#password").focus();//獲取焦點 return ; } //var param = "username="+username+"&password="+password; var param = {"username":username,"password":password}; $.post("/zq/login",param,function(result){ if(result){ window.location.href="/zq/success.jsp"; }else{ alert("使用者名稱或者密碼錯誤!"); } }); }); }); </script> </head> <body> <form> 使用者名稱:<input type="text" id="username" name="username"><br/> 密碼:<input type="text" id="password" name="password"><br/> <input type="button" value="登入" id="loginBtn"> </form> </body> </html>
後臺：(注意：這裡我使用的是SpringMVC)
/** * 登入處理： * 注意：非同步技術必須加@ResponseBody * @author 鄭清 */ @Controller public class LoginController { @RequestMapping("/login") @ResponseBody public boolean login(String username,String password){ return "admin".equals(username)&&"123456".equals(password) ? true : false; } }
執行效果：
