index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"  name="viewport" content="width=device-width,initial-scale=1 user-scalable=no">
    <title>刘昊</title>
    <!--用来加载外部资源的标签-->
    <!--相对路径和绝对路径-->
    <link rel="short icon" href="Resource/icon.png">
    <!--加载外部样式CSS,一个项目有很多地方样式都一样时-->
    <link rel="stylesheet"  href="ExternalStyle.css">
    <script type="text/javascript" src="CommonMethod.js"></script>
    <style>
        .L_second_div{
            text-align: center;
        }
        .L_second_div img{
            margin-top: 50px;
        }
         .L_form_div{
             background: white;
             width: 90%;
             height: 100px;
             margin: 0 auto;
             border: 1px  solid #CCCCCC;
             border-radius: 5px;
             margin-top: 30px;
         }
        .L_account_div{
           height: 50px;
            border-bottom: 1px solid #CCCCCC;
        }
         .L_form_div div span{
             font-size: 20px;
             padding-left: 15px;
             line-height: 50px;
         }
         input{
             outline: medium;
             background: transparent;
             border:0;
         }

        .L_login_btn_div{
            background: rgb(36,92,161);
            height: 50%;
            width: 90%;
            border-radius: 10px;
            margin: 20px auto;
            text-align: center;
        }
        .L_login_btn_div input{
            line-height: 50px;
            font-size: 20px;
            color: white;
        }
    </style>

</head>
<body>

<!--第一部分-->
<header class="DS_header" >
    <span>登录</span>
</header>


<!--第二部分-->
<div class="L_second_div">
<img class="L_head_img" src="Resource/head.png"alt="">
</div>


<!--第三部分-->
<form action="">
    <div class="L_form_div">
    <div class="L_account_div">
        <span>账户名</span>
        <input  id="L_account"  type="text" name="account"><br>
    </div>
        <div>
            <span>密码</span>
            <input id="L_password"  type="password" name="password"><br>
        </div>
    </div>


    <div class="L_login_btn_div">
    <input type="button" value="登录" id="L_btn">

    </div>
</form>

<script>

    var btn=document.querySelector("#L_btn");
       btn.onclick=function () {

           var username=encodeURIComponent(document.querySelector("#L_account").value);
           var pwd =encodeURIComponent(document.querySelector("#L_password").value);
            var par="username="+ username +"&pwd="+pwd;
          requestMethod('post' ,'login',par ,function (str) {
     if(str == "登录成功"){
         location.href = "DropletService.html";
     } else {
         alert(str);
     }
 });
       }


</script>


</body>
</html>