登录页面ajax

css如下：

body{
    background-color: aquamarine;
}
.login{
    width: 350px;
    height: 400px;
    border: 2px solid rebeccapurple;
    margin: 100px auto;
}
.login h3{
    line-height: 35px;
    text-align: center;
    font-size: 17px;
    font-weight:bold ;
}
.login p{
    margin: 20px;
}
input[type=password]{
    margin-left: 16px;
}
.login-btn{
    margin-left: 69px;
}

html如下：

<div class="login">
        <h3>校友相亲登录页</h3>
        <p>
            登录名：
            <input type="text">
        </p>
        <p>
            密码：
            <input type="password">
        </p>
        <p>
            <button class="login-btn" onclick="login()">登录</button>
        </p>
    </div>

jq ajax如下：

<script>
        /* 发送用户名和密码给后台，后台拿到数据，去数据库验证，存在返回成功，不存在则返回不存在 */
        /* 点击登录调取后台接口 */
        function login() {
            //     if (!$('input[type=text]').val().trim() || !$('input[type=password]').val().trim()) {
            //         alert('不能为空')
            //         return
            //     }
            /** 第一种写法**/
            //     $.ajax({
            //         url: "http://timemeetyou.com:8889/api/private/v1/login",
            //         method: "post",//因为登录要加密，所以要用post
            //         data: {
            //             username: $('input[type=text]').val().trim(),
            //             password: $('input[type=password]').val().trim()
            //         },
            //         success: function (res) {
            //             if (res.meta.status != 200) {
            //                 alert(res.meta.msg)
            //                 return
            //             }
            //             console.log(res);
            //         }
            //     })
            
/** 第二种写法**/
            let url = "http://timemeetyou.com:8889/api/private/v1/login"
            $.post(url, {
                username: $('input[type=text]').val(),
                password: $('input[type=password]').val()
            }, function (res) {
                if (res.meta.status != 200) {
                    alert(res.meta.msg)
                    return
                }
            })
        }
    </script>