<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body marginheight="0px" marginwidth="0px" >
<div class="form">
    <form id="login">
        <input  class="id" type="text" placeholder="用户名" >
        <br>
        <input style="vertical-align:middle;" class="ps" type="password" placeholder="密码" maxlength="20">
        <br>
        <button style="vertical-align:middle;" onclick="login()" class="bt">登录</button>
        <br>
        <input  style="vertical-align:middle;" type="checkbox" >记住我
        <br>
    </form>
</div>
</body>
<script>

    function  login(){
        alert(12344);
        window.close();
        post();

    }

    function post () {
        //请求参数、url、创建XMLHttpRequest
        var data = 'username=admin&password=123456aa',
            url = 'http://api.dev.patzn.com:8081/v1/auth/login',
            xhr = new XMLHttpRequest();

        xhr.open('post', url);
        //设置header
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
        xhr.onreadystatechange = function () {
            alert(xhr.readyState)
            alert(xhr.status)
            if (xhr.readyState === 4 && ( xhr.status === 200 || xhr.status === 304 )){
                console.log(xhr.responseText);
                window.open("http://web.dev.patzn.com:8082");
            }
        }
    }

</script>

<style>
    .form{
    position: absolute;
    width: 350px;
    height: 400px;
    text-align: center;
    top: 60%;
    left: 50%;
    margin-top: -300px;
    margin-left: -150px;
    color: black;
    background-color: rgba(0,0,0,0.2);

    }
    .id{
    top:20%;
    width: 300px;
    height: 30px;
    margin: 30px ;

    }
    .ps{
    width: 300px;
    height: 30px;
    margin: 30px;

    }
    .bt{
    font-size: 15px;
    width: 300px;
    height: 30px;
    margin: 30px;
    background-color: indianred;
    }
</style>
</html>

