ajax:post

186 阅读1分钟
<style>
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;
}
</style>
 <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>
    <script src="./jquery-1.12.4.js"></script>
    <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(),
            //         password:$('input[type=password]').val()
            //     },
            //     success:function(res){
            //         if(res.meta.status!=200){
            //             alert(res.meta.msg)
            //             return;
            //         }
            //     }
            // })
            /* post简写  */
            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;
                }
                alert(res.meta.msg)
            })
        }
    </script>