使用者登入和註冊介面（html ajax）
阿新 • • 發佈：2019-02-18
使用者名稱密碼的登入頁面（點選註冊跳轉到註冊頁面）
- </html>login.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8" /> <title>index</title> <!-- 新 Bootstrap 核心 CSS 檔案 --> <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <!-- jQuery檔案。務必在bootstrap.min.js 之前引入 --> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"> </script> <!-- 最新的 Bootstrap 核心 JavaScript 檔案 --> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <form id="form1" class="well" style="width: 30em; margin: auto; margin-top: 150px;"> <h3>使用者登入</h3> <div class=" input-group input-group-md"> <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span> <input id="userName" type="text" class="form-control" placeholder="使用者名稱" aria-describedby="sizing-addon1" /> </div> <br /> <div class="input-group input-group-md"> <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span> <input type="password" id="password" class="form-control" placeholder="密碼" aria-describedby="sizing-addon1" /> </div> <!-- <div class="well well-sm" style="text-align: center;"> <input type="radio" name="kind" value="tea" /> 管理員 <input type="radio" name="kind" value="stu" /> 學生 </div> --> <button type="button" class="btn btn-success btn-block">登入</button> <a class="btn btn-sm btn-white btn-block" style="text-align: right;" th:href="@{register}" href="register.html"><h6>還沒有賬戶？前往註冊</h6></a> </form> <script> $("#form1").on("click",".btn",function(e){ var radioValue = $('input:radio[name="kind"]:checked').val(); var formData=$("#form1").serialize(); $.ajax({ url:"/login", type:"post", data:{"userName":$("#userName").val(),"password":$("#password").val()}, dataType:"json", success:function(result){ if("true"==result.flag){ window.location.href = "http://www.baidu.com"; }else{ alert("使用者名稱或者密碼不對"); } } }) }) </script> </body> </html>使用者註冊介面（註冊完點登入跳轉到登入介面）
register.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>INSPINIA | Register</title> <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/> <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet"/> <link th:href="@{/css/plugins/iCheck/custom.css}" rel="stylesheet"/> <link th:href="@{/css/animate.css}" rel="stylesheet"/> <link th:href="@{/css/style.css}" rel="stylesheet"/> <!-- Sweet Alert --> <link th:href="@{/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet"/> </head> <body class="gray-bg"> <div class="middle-box text-center loginscreen animated fadeInDown" style="width: 30em; margin: auto; margin-top: 150px;"> <div> <div> <h2 class="logo-name">歡迎您，先生/女士</h2> </div> <h3>歡迎註冊</h3> <!--<p>Create account to see it in action.</p>--> <form class="m-t" role="form" action="register.html" method="post"> <div class="form-group"> <input type="text" class="form-control" placeholder="userName" name="userName" required=""/> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="password" name="password" required=""/> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="email" name="email" required=""/> </div> <div class="form-group"> <div class="checkbox i-checks"><label> <input type="checkbox"/><i></i> 記住賬號密碼 </label></div> </div> <button type="submit" class="btn btn-primary block full-width m-b">注 冊</button> <p class="text-muted text-center"><small>已經註冊 ?</small></p> <a class="btn btn-sm btn-white btn-block" th:href="login" href="login.html">登 錄</a> </form> <!--<p class="m-t"> <small>Inspinia we app framework base on Bootstrap 3 © 2014</small> </p>--> </div> </div> <!-- Mainly scripts --> <script th:src="@{/js/jquery-2.1.1.js}"></script> <script th:src="@{/js/bootstrap.min.js}"></script> <!-- Mainly scripts --> <!--<script src="js/jquery-2.1.1.js"></script>--> <!--<script src="js/bootstrap.min.js"></script>--> <!-- iCheck --> <script src="js/plugins/iCheck/icheck.min.js"></script> <!-- Sweet alert --> <script th:src="@{/js/plugins/sweetalert/sweetalert.min.js}"></script> <!--<script>--> <!--$(document).ready(function(){--> <!--$('.i-checks').iCheck({--> <!--checkboxClass: 'icheckbox_square-green',--> <!--radioClass: 'iradio_square-green',--> <!--});--> <!--});--> <!--</script>--> <script th:inline="javascript"> var error = [[${error}]]; $(document).ready(function () { if(error!=null){ swal({ title : "溫馨提示", text : error }); } $('.i-checks').iCheck({ checkboxClass: 'icheckbox_square-green', radioClass: 'iradio_square-green', }); }); </script> </body> </html>