筑坐极_Ajax登录

(1)验证用户名密码是否为空

代码:

function ubb() {
    let username = $("#un").val();
    let password = $("#pw").val();
    username = username.replace(/\s/g, "");
    password = password.replace(/\s/g, "");
    if(username.length === 0 || password.length === 0){

        // jQ写法
        // $("#error-msg").text("用户名或密码不可为空~");
        // 原生js写法
        document.getElementById("error-msg").innerText = "用户名或密码不可为空~";
        return false;
    } else {

        // $("#error-msg").text("");
        document.getElementById("error-msg").innerText = "";
        return true
    }
}

(2)用Ajax调用上面的验证方法实现登录

代码:

function submitForm2(){
    let isAllow = ubb();
    if (isAllow === false) return;

    let un = $("#un").val();
    let pw = $("#pw").val();


    let Url = "https://zhuzuoji.com/myapi/employee/login";

    let ps = {
        key: "vv9544",
        email: un,
        password: pw
    }
    $.ajax({
        url: Url,
        data: ps,
        type: 'post',
        success: function (result) {
            result = JSON.parse(result);
            console.log(result);
            if (result.status === true) {
                console.log("Cg");
            } else {
                $("#error-msg").text(result.msg);
            }
        }
    })
}

(3)完整代码案例:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 <!--禁止缩放-->
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=0 ">
    <title>登录页</title>
 <!--图标-->
 <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="./css/bootstrap.5.1.min.css">
    <script src="./js/jquery.3.6.0.js"></script>
    <script src="./js/bootstrap.5.1.min.js"></script>
</head>
<body>
<!--头部导航-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
 data-bs-toggle="dropdown" aria-expanded="false">
 Dropdown
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

<div class="container-xxl">


 <!--
 这个文档里有如何隐藏元素:
    https://blog.csdn.net/TL18382950497/article/details/108171265
    -->

 <div class="row">

        <div class="d-none d-sm-block col-sm-2 col-md-2 col-lg-4"></div>
        <div class="d-none d-lg-block col-lg-4"></div>
        <div class="col-xs-12 col-sm-8 col-md-8  col-lg-4 p-5">

            <h2 class="mb-5 mt-2 text-center">密码登录</h2>

            <form action="#">

                <div class="mb-3">
 <!-- unBlur(this.value) -->
 <input type="text" class="form-control" placeholder="账号" id="un" onblur="ubb()">
                </div>

                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="密码" id="pw" onblur="ubb()">
                </div>

                <div class="mb-3 hide error-block ">
                    <p id="error-msg" style="color: red;"></p>
                </div>

                <div class="mb-3  text-center">
                    <button type="button" class="btn btn-success" style="width: 100%" onclick="submitForm2()">登录
 </button>
                </div>

            </form>


        </div>


    </div>

</div>

</body>
<script>
 function submitForm2(){
        let isAllow = ubb();
 if (isAllow === false) return;

 let un = $("#un").val();
 let pw = $("#pw").val();


 let Url = "https://zhuzuoji.com/myapi/employee/login";

 let ps = {
            key: "vv9544",
 email: un,
 password: pw
        }
        $.ajax({
            url: Url,
 data: ps,
 type: 'post',
 success: function (result) {
                result = JSON.parse(result);
 console.log(result);
 if (result.status === true) {
                    console.log("Cg");
 } else {
                    $("#error-msg").text(result.msg);
 }
            }
        })
    }

    function ubb() {
        let username = $("#un").val();
 let password = $("#pw").val();
 username = username.replace(/\s/g, "");
 password = password.replace(/\s/g, "");
 if(username.length === 0 || password.length === 0){

            // jQ写法
 // $("#error-msg").text("用户名或密码不可为空~");
            // 原生js写法
 document.getElementById("error-msg").innerText = "用户名或密码不可为空~";
 return false;
 } else {

            // $("#error-msg").text("");
 document.getElementById("error-msg").innerText = "";
 return true
 }
    }
</script>
</html>

(4)效果展示: Ajax登录

多想多做多看,祝大家学有所成!

Ajax登录

徐**

js,Ajax,jQuery,bootstrap

首先写一个方验证用户名和密码是否为空,在不为空的情况下用Ajax发送请求到达指定的路径来判断用户名和密码是否存在,如果存在则跳转页面,如果不存在则给出错误提示信息

2021.09.06

769人

徐**

安徽省巢湖地区巢湖市

Hot:3153

徐**

当前作品暂无评分

还未获得评语哦~