用户登录和注册界面(html ajax)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37139060/article/details/81430924

用户名密码的登录页面(点击注册跳转到注册页面)

  • </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 &copy; 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>
    

     

     

展开阅读全文

没有更多推荐了,返回首页