1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>黑马旅游网-登录</title> 9 <link rel="stylesheet" type="text/css" href="css/common.css"> 10 <link rel="stylesheet" type="text/css" href="css/login.css"> 11 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 12 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 13 <!--[if lt IE 9]> 14 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> 15 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 16 <![endif]--> 17 <!--导入angularJS文件--> 18 <script src="js/angular.min.js"></script> 19 <!--导入jquery--> 20 <script src="js/jquery-3.3.1.js"></script> 21 <script> 22 $(function () { 23 //给登录按钮绑定单击事件 24 $("#btn_sub").click(function () { 25 //发送ajax请求，提交表单数据 26 $.post( 27 "loginServlet", 28 $("#loginForm").serialize(), 29 function (data) { 30 if (data.flag){ 31 location.href = "index.html"; 32 } else { 33 $("#errorMsg").html(data.errorMsg); 34 } 35 }, 36 "json" 37 ); 38 }); 39 }); 40 </script> 41 </head> 42 43 <body> 44 <!--引入头部--> 45 <div id="header"></div> 46 <!-- 头部 end --> 47 <section id="login_wrap"> 48 <div class="fullscreen-bg" style="background: url(images/login_bg.png);height: 532px;"> 49 50 </div> 51 <div class="login-box"> 52 <div class="title"> 53 <img src="images/login_logo.png" alt=""> 54 <span>欢迎登录黑马旅游账户</span> 55 </div> 56 <div class="login_inner"> 57 58 <!--登录错误提示消息--> 59 <div id="errorMsg" class="alert alert-danger" ></div> 60 <form id="loginForm" action="" method="post" accept-charset="utf-8"> 61 <input type="hidden" name="action" value="login"/> 62 <input name="username" type="text" placeholder="请输入账号" autocomplete="off"> 63 <input name="password" type="text" placeholder="请输入密码" autocomplete="off"> 64 <div class="verify"> 65 <input id="check" name="check" type="text" placeholder="请输入验证码" autocomplete="off"> 66 <span><img src="checkCodeServlet" alt="" onclick="changeCheckCode(this)"></span> 67 <script type="text/javascript"> 68 //图片点击事件 69 function changeCheckCode(img) { 70 img.src="checkCodeServlet?"+new Date().getTime(); 71 } 72 </script> 73 </div> 74 <div class="submit_btn"> 75 <button type="button" id="btn_sub">登录</button> 76 <div class="auto_login"> 77 <input type="checkbox" name="" class="checkbox"> 78 <span>自动登录</span> 79 </div> 80 </div> 81 </form> 82 <div class="reg">没有账户？<a href="javascript:;">立即注册</a></div> 83 </div> 84 </div> 85 </section> 86 <!--引入尾部--> 87 <div id="footer"></div> 88 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 89 <script src="js/jquery-1.11.0.min.js"></script> 90 <!-- Include all compiled plugins (below), or include individual files as needed --> 91 <script src="js/bootstrap.min.js"></script> 92 <!--导入布局js，共享header和footer--> 93 <script type="text/javascript" src="js/include.js"></script> 94 </body> 95 96 </html>
原文链接：https://www.cnblogs.com/yppah/p/14998189.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/2824
