Skip to content

M
myweb

星系BLINK / myweb

通知 1
Star 0
Fork 0
M
myweb

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
login用户注册界面（简洁版bootstrap,jQuery）.html 2.9 KB
Newer Older
Lovesick Sophia's avatar
update更新  
Lovesick Sophia 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8" />
    <title>login登录</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>
        <br>
        <!--     <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><br><br>

    <center>login.html用户注册界面（注册完点登录）</center><br><br>
    <center>原文链接：https://blog.csdn.net/qq_37139060/article/details/81430924
    </center>
</body>

</html>