Ajax交互小案例

最新推荐文章于 2022-11-22 14:57:05 发布

smileForward

最新推荐文章于 2022-11-22 14:57:05 发布

阅读量588

点赞数

分类专栏：案例文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/weixin_45000814/article/details/105716638

版权

案例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天写的是登录注册到数据库的小案例，利用ajax技术实现

首先介绍下Ajax：

是JavaScript提供的,与后端进行数据交互的方法
之前使用的form表单和a超链接,都是HTML的数据交互方法

        优点:
            1,不用页面跳转,就可以完成数据交互
            2,可以减轻服务器压力

        步骤:
            1,创建ajax请求实例化对象
            2,设定请求相关信息
            3,发送请求
            4,接收响应

案例分为几个文件，具体如下：

首页内容页面(包括登录)

此页面实现了登录一次就不能再点击登录，只有退出登录判断cookie不存在时才可以再次点击登录按钮
同样登录成功才会设置cookie，并且只有存在cookie时才能跳转其他页面
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #btns {
            margin: 40px 100px;
        }

        #login {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            display: none;
            background: rgba(0, 0, 0, .4);
        }

        button {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="btns">
        <h1>我是首页</h1>
        <button name="reg">注册</button><br>
        <button name="login">登录</button><br>
        <button name="exit">退出登录</button><br>
        <button name="pay">购物车</button>
        <div id="login">
            账号: <input type="text"><br>
            密码: <input type="password"><br>
            <button name="login2">登录</button>
        </div>
    </div>

    <script src="/utils.js"></script>
    <script>

        const oBtns = document.querySelector("#btns");

        const oDiv = document.querySelector("#login");

        const oLogin = document.querySelector("[name='login']");

        // 先得到cookie进行验证，不存在就要重新登录
        const obj = Utils.getCookie();

        // console.log(obj);

        if (obj.login === '1') {

            // 说明登录成功，就不能再点击登录按钮了
            oLogin.disabled = true;

        }

        // 事件委托
        oBtns.addEventListener('click', (e) => {

            // 先确定点击的是button
            if (e.target.tagName == "BUTTON") {

                // 在判断点击的是哪个按钮,注册按钮
                if (e.target.getAttribute('name') === "reg") {

                    window.location.href = './reg.html';

                }

                if (e.target.getAttribute('name') === "login") {

                    oDiv.style.display = 'block';

                    // 说明登录成功，就不能再点击登录按钮了
                    oLogin.disabled = true;

                }

                // 退出登录，删除cookie
                if (e.target.getAttribute('name') === "exit") {

                    Utils.setCookie('login', '1', - 1);

                    oLogin.disabled = false;

                }

                // 进入支付页面
                if (e.target.getAttribute('name') === "pay") {

                    if (obj.login === '1') {

                        // 有cookie并且正确就跳转支付页面
                        window.location.href = './pay.html';

                    }
                    else {
                        // 如果没有login,证明还没有登录
                        // 弹出确认框 询问是否要跳转值登录页面
                        // 点击确定 返回值是true  点击取消 返回值是false
                        let bool = window.confirm('您还没有登录,点击确定跳转登录页面');

                        // 如果是 true,跳转至首页面进行登录,否则不做任何操作
                        if (bool === true) {

                            window.location.href = 'index.html';

                        }
                    }
                }
                // 登录按钮
                if (e.target.getAttribute('name') === "login2") {

                    // 获取输入的登录账号密码
                    let loginName = document.querySelectorAll('input')[0].value;
                    let loginPwd = document.querySelectorAll('input')[1].value;

                    Utils.postAjaxSend('./login.php', fun, `loginName=${loginName}&loginPwd=${loginPwd}`);

                    // 接收到响应体内容后执行的回调函数
                    function fun(str) {

                        if (str == '1') {

                            // 登录成功
                            // 弹出提示框,登录成功
                            window.alert('您登录成功了');

                            // 设定一个登录cookie,10分钟
                            Utils.setCookie('login', '1', 600);

                            // 让登录div再次隐藏
                            oDiv.style.display = 'none';

                        } else {

                            // 登录失败的提示代码
                            window.alert('您登录失败,请您继续玩命登录');
                        }
                    }

                }

            }

        });
    </script>
</body>

</html>

注册页面文件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input,
        button {
            height: 30px;
            margin: 20px 0;
            font-size: 20px;
        }

        button {
            margin: 0 20px;
        }

        span[name^="promptInfo"] {
            margin-left: 30px;
        }

        span[name="verifiCode"] {
            margin-left: 20px;
        }
    </style>
</head>

<body>
    登录账号：<input type="text" name="loginAccount" placeholder="请输入账号" required maxlength="16">
    <span name="promptInfo"></span><br>
    登录密码：<input type="password" name="loginPassword" placeholder="请输入密码" required> <span name="promptInfo1"></span><br>
    再次输入：<input type="password" name="loginPassword1" placeholder="请再次输入密码" required><br>
    验 证 码： <input type="text" name="inputVerifiCode" required><span name="verifiCode"></span><button
        type="button">看不清,重新刷新</button><span name="promptInfo2"></span><br>
    <input type="submit" value="注册">
    <input type="reset" value="重置">

    <div name="msg"></div>
    <script src="/utils.js"></script>
    <script>

        var promptInfo = document.querySelector("[name='promptInfo']");// 账号提示信息的span

        var promptInfo1 = document.querySelector("[name='promptInfo1']");// 密码提示信息的span

        var promptInfo2 = document.querySelector("[name='promptInfo2']");// 验证码错误提示信息的span

        var loginAccount = document.querySelector("[name='loginAccount']");// 登录账号

        var loginPassword = document.querySelector("[name='loginPassword']");//登录密码

        var loginPassword1 = document.querySelector("[name='loginPassword1']");// 确认登录密码

        var verifiCode = document.querySelector("[name='verifiCode']");// 自动生成验证码

        var inputVerifiCode = document.querySelector("[name='inputVerifiCode']");// 输入验证码

        var oForm = document.querySelector("form");

        var btn = document.querySelector("button");

        var regBtn = document.querySelector("[type='submit']"); // 注册按钮

        // 点击更新随机验证码
        btn.onclick = function () {

            verifiCode.innerHTML = Utils.randomVerifiCode(Utils.getRandomColor);
        }
        // 提前调用显示在网页
        btn.onclick();

        // 获取焦点时,在span标签中输入提示
        loginAccount.onfocus = function () {

            promptInfo.innerHTML = "请您输入账号,不能为空";

        }

        // 获取焦点时,在span标签中输入提示
        loginPassword.onfocus = function () {

            promptInfo1.innerHTML = "请您输入密码,不能为空";

        }

        // 注册验证
        regBtn.addEventListener('click', () => {

            // 密码和确认密码验证
            if (loginPassword.value !== loginPassword1.value) {
                promptInfo1.style.color = "red";
                promptInfo1.innerHTML = '您两次输入的密码不一样,请重新输入';
                return;
            }

            // 验证码确认
            if (inputVerifiCode.value.toLowerCase() !== verifiCode.innerText.toLowerCase()) {
                promptInfo2.style.color = "red";
                promptInfo2.innerHTML = '您输入的验证码错误,请重新输入';
                return;
            }

            // 验证成功，发送数据请求
            Utils.postAjaxSend('./reg.php', fun, `regName=${loginAccount.value}&regPwd=${loginPassword.value}`);

        });

        function fun(str) {
            // 获取写入5秒跳转的div标签
            const oDiv = document.querySelector('[name="msg"]');

            // 如果是注册成功,给出提示,5秒跳转回首页面
            // 1,是PHP后台程序,返回的数据内容
            if (str == '1') {

                let int = 5;

                setInterval(() => {

                    oDiv.innerHTML = `注册成功,${int}秒后跳转首页面`;

                    int--;

                    if (int === 0) {
                        window.location.href = './index.html';
                    }

                }, 1000);
            } else {
                oDiv.innerHTML = '<span style="color:red">注册失败,用户名被占用,请您选择新的用户名</span>';
            }
        }

    </script>
</body>

</html>

登录php文件代码

<?php

$loginName = $_POST['loginName'];
$loginPwd = $_POST['loginPwd'];

// 连接数据库
$link = mysqli_connect('127.0.0.1', 'root', 'root', 'nz2002', '3306');

// sql语句
$sql = "SELECT * FROM `user` WHERE `username`='{$loginName}' AND `userpwd`='{$loginPwd}'";

// 执行sql语句
$ret = mysqli_query($link, $sql);

// 得到有效数据
$arr = mysqli_fetch_all($ret, MYSQLI_ASSOC);

// 有数据登录成功
if (count($arr) !== 0) {

    echo '1';
} else {

    echo "0";
}

mysqli_close($link);

注册php文件代码

<?php

$regName = $_POST['regName'];
$regPwd = $_POST['regPwd'];

// 连接数据库
$link = mysqli_connect('127.0.0.1', 'root', 'root', 'nz2002', '3306');

// sql语句
$sql = "INSERT INTO `user` (`username`,`userpwd`) VALUES ('{$regName}','{$regPwd}')";

// 执行sql语句，成功返回true
$ret = mysqli_query($link, $sql);

// 注册成功输出1
if ($ret) {

    echo '1';
} else {

    echo "0";
}

mysqli_close($link);

封装多方法代码utils.js文件


// 定义一个变量封装几个函数，返回几个对象函数,直接调用
var Utils = (function () {
    return {
        // 对象名(函数名)
        setStyle: function (elem, style) {
            for (let prop in style) {
                elem.style[prop] = style[prop];
            }
        },
        // 参数：透明度(不写默认是1，不透明)
        getRandomColor: function (alpha) {
            // isNaN不是数字返回true
            if (alpha > 1 || isNaN(alpha) || alpha < 0) {
                alpha = 1;
            }
            var color = 'rgba(';
            for (var i = 0; i < 3; i++) {
                var str = parseInt(Math.random() * 256);
                color += str + ',';
            }
            color += alpha + ')';
            return color;
        },
        // 随机验证码
        randomVerifiCode: function (callBack) {

            var str = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";

            var str1 = "";

            for (let i = 0; i < 6; i++) {

                // 随机旋转
                var h = Math.random() < 0.5 ? -1 : 1;

                var zhuan = Math.random() * h * 30;

                // 随机字体大小
                var randomFontSize = parseInt(Math.random() * 15) + 20;

                var num = parseInt(Math.random() * str.length);

                if (str1.indexOf(str[num]) != -1) {

                    i--;
                    continue;

                }

                str1 += `<span style="transform:rotateZ(${zhuan}deg);display:inline-block;color:${callBack()};font-size:${randomFontSize}px;margin-left:5px;">${str[num]}</span>`;

            }

            return str1;

        },
        // 多属性移动函数
        move: function (elem, obj, callBack) {

            let time = {};

            for (let type in obj) {

                let oldVal = 0;

                if (type === "opacity") {

                    // 小数不能准确比较大小，所以扩展一百倍在加减最后比较，输入参数时也是扩大后的值
                    oldVal = parseFloat(window.getComputedStyle(elem)[type]) * 100;

                }
                else {

                    oldVal = parseInt(window.getComputedStyle(elem)[type]);

                }

                time[type] = setInterval(() => {

                    // 分几步完成目标移动
                    let val = (obj[type] - oldVal) / 5;

                    // 大于0向上取整，小于0向下取整，取得都是1或-1进行加减
                    val = val > 0 ? Math.ceil(val) : Math.floor(val);

                    oldVal += val;

                    if (type === "opacity") {

                        // 透明度写入时需要缩小一百倍
                        elem.style[type] = oldVal / 100;

                    }
                    else {

                        elem.style[type] = oldVal + 'px';

                    }

                    if (oldVal == obj[type]) {

                        // 移动到目标位置后清除定时器
                        clearInterval(time[type]);

                        // 删除定时器列表中的对应编号属性
                        delete (time[type]);

                    }

                    if (Object.keys(time) == 0) {

                        // 所有样式执行完成后再执行回调函数
                        callBack();

                    }

                }, 30);

            }

        },
        // 设置cookie，参数是键值对和存储时效(单位是秒)
        setCookie: function (key, val, time) {

            // 得到当前时间
            const nowTime = new Date();

            // 浏览器时间比当前时间少八个小时,都是ms毫秒相加减,所以先获取当前时间戳
            // 得到当前浏览器时间
            let t = nowTime.getTime() - (8 * 60 * 60 * 1000);

            // 设置达到时效后的总共时间毫秒数
            t = t + time * 1000;

            // 时间戳设定回时间对象，就可以得到以后到达的时间值
            nowTime.setTime(t);

            // 判断是否传time参数，不传参默认就算session会话时效，页面一关就删除cookie，数据就会消失
            let a = (time === undefined) ? '' : nowTime;

            // 写入到cookie中
            document.cookie = `${key}=${val};expires=${a}`;
        },
        getCookie: function () {

            // 得到cookie字符串
            let cookieStr = document.cookie;

            // 先转换为数组
            const arr = cookieStr.split('; ');

            const obj = {};
            // 循环遍历，继续分割
            arr.forEach((val, key) => {

                const newArr = val.split('=');

                obj[newArr[0]] = newArr[1];
            });
            // console.log(obj);
            return obj;
        },

        // get方式发送ajax请求，参数一个是跳转路径，一个是接收到响应体内容后执行的函数
        getAjaxSend: (url, callBack) => {

            // 创建ajax对象
            const xhr = new XMLHttpRequest();

            // 配置请求相关信息
            xhr.open('get', url);

            // 开始发送请求
            xhr.send();

            // 接收到响应体内容
            xhr.onload = () => {

                callBack(xhr.response);

            };

        },

        // post方式发送ajax请求，参数一个是跳转路径，一个是接收到响应体内容后执行的函数,一个是发送的字符串
        postAjaxSend: (url, callBack, dataStr) => {

            // 创建ajax对象
            const xhr = new XMLHttpRequest();

            // 配置请求相关信息
            xhr.open('post', url);

            // 先设定请求头
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

            // 开始发送请求
            xhr.send(dataStr);

            // 接收到响应体内容
            xhr.onload = () => {

                console.log(xhr);
                callBack(xhr.response);
            };

        },
    }
})();

smileForward

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax交互小案例

今天写的是登录注册到数据库的小案例，利用ajax技术实现分为几个文件，具体如下：首页内容页面(包括登录)此页面实现了登录一次就不能再点击登录，只有退出登录判断cookie不存在时才可以再次点击登录按钮同样登录成功才会设置cookie，并且只有存在cookie时才能跳转其他页面<!DOCTYPE html><html lang="en"><head&...
复制链接

扫一扫