JSP_5.16_课堂笔记

最新推荐文章于 2024-07-25 14:12:59 发布

[CN]qi_fen_zhong

最新推荐文章于 2024-07-25 14:12:59 发布

阅读量75

点赞数

文章标签：笔记 servlet

本文链接：https://blog.csdn.net/weixin_60422460/article/details/130738816

版权

login.jsp

<%@ page language="java" contentType="text/html; UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
   <html>
       <head>
           <meta charset="UTF-8">
           <title>登录页面</title>
           <script src="js/jquery-3.3.1.min.js"></script>
           <style type="text/css">
               #diceng{
                   width:430px;
                   height:380px;
                   background-color:#FFFFFF33;
                   position:absolute;
                   left:50%;
                   top:50%;
                   margin-left:-215px;
                   margin-top:-190px;
                   border-radius:5px;
               }
               #zhongceng{
                   width:400px;
                   height:350px;
                   background-color:#FFFFFFFF;
                   position:absolute;
                   left:50%;
                   top:50%;
                   margin-left:-200px;
                   margin-top:-175px;
                   border-radius:5px;
               }
               #d1{
                   width:400px;
                   height:60px;
                   font-size:30px;
                   font-family:Avenir,Helvetica,Arial,sans-serif;
                   color:black;
                   display:block;
                   margin-left:40px;
                   margin-top:20px;

               }
               #d2{
                   width:400px;
                   height:35px;
                   font-size:20px;
                   font-family:Avenir,Helvetica,Arial,sans-serif;
                   color:black;
                   display:block;
                   margin-left:40px;

               }
               #d3{
                   width:400px;
                   height:35px;
                   font-size:20px;
                   font-family:Avenir,Helvetica,Arial,sans-serif;
                   color:black;
                   display:block;
                   margin-left:40px;

               }
               #username{
                   width:280px;
                   height:40px;
                   font-size:30px;
                   font-family:Avenir,Helvetica,Arial,sans-serif;
                   color:black;
                   display:block;
                   margin-left:40px;
                   border-radius:5px;

               }
               #password{
                   width:280px;
                   height:40px;
                   font-size:30px;
                   font-family:Avenir,Helvetica,Arial,sans-serif;
                   color:black;
                   display:block;
                   margin-left:40px;
                   border-radius:5px;


               }
               #submit{
                   width:237px;
                   height:40px;
                    margin-top: 5px;
                    background-color: #47a0fc;
                    border: 1px solid #47a0fc;
                    color: #fff;
                    font-size: 14px;
                    cursor: pointer;
                    outline: none;
                    border-radius: 2px;
                   display:block;
                   margin-left:65px;
                   margin-top:15px;
                   border-radius:5px;

               }
               .bjimg {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    min-width: 1000px;
                    z-index: -10;
                    zoom: 1;
                    background-color: #fff;
                    background-repeat: no-repeat;
                    background-size: cover;
                    -webkit-background-size: cover;
                    -o-background-size: cover;
                    background-position: center 0;
                   background-image:url("https://w.wallhaven.cc/full/ex/wallhaven-ex9ork.jpg")
                   }
           </style>
       </head>
   <body>
       <div class="bjimg"></div>
       <div id=diceng>
           <div id=zhongceng>

                   <div id=d1>欢迎登录优逸客实训平台</div>
                   <div id=d2>用户名</div>
                   <input id=username type='text' placeholder="请输入用户名"></input>
                   <div id=d3>密码</div>
                   <input id=password type="password" placeholder="请输入密码"></input>
                   <button id=submit>登录</button>
           </div>
       </div>
       <script>
    $(document).ready(function(){
        $("#submit").click(function(){
            var username = $("#username").val(); // 获取用户名
            var password = $("#password").val(); // 获取密码
            if(username == "" || password == ""){
                alert("请输入用户名和密码！"); // 输入为空，提示用户
                return;
            }
            $.ajax({
                url: "jdbclogin.jsp?username="+username+"&password="+password, // 后端处理jsp文件
                type: "GET",
               dataType:'json',
                success: function(res){
                    if(res.msg== "success"){
                        window.location.href = "main.jsp"; // 登录成功，跳转到主页
                    }else{
                        alert("用户名或密码错误！"); // 登录失败，提示用户
                    }
                }
            });
        });
    });
</script>
   </body>
</html>