jquery写ajax(课程管理系统，登陆页面)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

页面布局

         <div class="box">
    <div class="dl">
        <table>
            <caption>登陆页面</caption>
            <tr>
                <td>
                    账号：
                    <input type="text" id="loginId">
                </td>
            </tr>
            <tr>
                <td>
                    密码：
                    <input type="password" class="loginPwd">
                </td>
            </tr>
            <tr>
                <td>
                    <button class="tj">提交</button>
                    <button class="clear">取消</button>
                </td>
            </tr>

        </table>

    </div>
</div>

页面样式

      <style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: aqua;
        width: 100vw;
        height: 100vh;

    }

    .box {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    .dl {
        border: 1px solid black;
        width: 300px;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    input {
        outline: none;
    }

    button {
        width: 50px;
        height: 20px;
        margin-top: 10px;
    }

    button:first-child {
        margin-left: 60px;
    }
</style>

引入jquery库

   <script src="./jquery.js"></script>
   
   src里面可以用自己下载过的库也可以输入网址（  https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js
   ）
   
   

思路:

①。点击提交按钮的时候需要先获取到账号和密码的值，判断账号和密码有没有空，如果有则给出提示，然后输入接口地址，用解构法赋值，判断如果密码账号正确，则跳转网页，否则提示(账号不存在或则密码错误)

②。点击取消按钮清空账号和密码的值

      <script>
    // 点击提交
    $(".tj").click(function () {
        let loginId = $("#loginId").val()
        let loginPwd = $(".loginPwd").val()
        if (!loginId || !loginPwd) {
            alert("内容不能为空")
            return
        }
        $.get("https://www.bingjs.com:8001/Admin/Login", {
            loginId: loginId,
            loginPwd: loginPwd
        }, function (item) {
            let { message, success } = item
            if (success) {
                location.href = "./首页面.html"
            } else {
                alert(message)
            }
        })

    })
    // 点击取消清楚文本框内容
    $(".clear").click(function () {
        $("#loginId").val("")
        $(".loginPwd").val("")
    })
</script>