Ajax的get的demo

最新推荐文章于 2023-06-05 16:04:34 发布

咩有猫腻.

最新推荐文章于 2023-06-05 16:04:34 发布

阅读量230

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/DcTbnk/article/details/105718110

版权

Ajax 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一.ajax_get_demo1

ajax请求demo1,get请求
在这里插入图片描述

二.ajax_get_demo2

ajax请求demo2,get携带参数请求
在这里插入图片描述

三.ajax_get_demo3

ajax请求demo3,简单的登录效果 在这里插入图片描述

四.ajax_get_demo4

ajax请求demo4,简单的登录效果,根据响应体,执行不同操作

html

    <style>
        div{
            height: 30px;
            line-height: 30px;
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>ajax请求demo4,简单的登录效果,根据响应体,执行不同操作</h1>
    <!-- 输入提示内容用的 -->
    <div></div>
    账号 : <input type="text"><br>
    密码 : <input type="password"><br>
    <button>点击访问</button>
    <script src="./utils.js"></script>
    <script>
        // 通过input标签输入账号密码
        // 通过ajax方式来请求访问PHP程序
        // 使用get方式,并且携带input标签输入的的参数

        // button按钮
        const oBtn = document.querySelector('button');
        // div标签
        const oDiv = document.querySelector('div');

        oBtn.addEventListener('click' , ()=>{
            // 1,点击时,先获取input标签的属性值也就是参数
            let regname = document.querySelectorAll('input')[0].value;
            let regpwd = document.querySelectorAll('input')[1].value;

            // console.log(regname , regpwd);

            // 1,创建 ajax请求对象
            const xhr = new XMLHttpRequest();

            // 2,设定 ajax请求相关信息
            xhr.open('get' , `./ajax3.php?regname=${regname}&regpwd=${regpwd}`);

            // 3,发送请求
            xhr.send();

            // 4,接收响应体
            xhr.onload = function(){
                // 请求结束时的操作
                // 请求结果 也就是 响应体 也即是 后端PHP程序输出的内容
                // response 和 responseText
                // response 是响应体的所有内容
                // responseText 只是文本内容
                // 推荐使用 response
                // 返回响应体的内容,数据类型,都是字符串
                // console.log(xhr.response);
                // 如果 xhr.response 是 1 证明登录成功
                // 如果 xhr.response 是 0 证明登录失败

                if(xhr.response === '0'){
                    // 登录失败
                    // 给提示的div中写入内容
                    oDiv.innerHTML = '用户名或密码有误，请重新输入或<a href="JavaScript:;">找回密码</a>';
                }else{
                    // 登录成功
                    // 提示div,没有内容,赋值空字符串
                    oDiv.innerHTML = '';
                    // 设定登录cookie 时效是7天的秒数
                    mySetCookie('login' , '1' , 7*24*60*60);
                    // 登录成功,5秒以后跳转
                    // 定义一个参数,记录事件
                    let int = 5;
                    // 设置定制器,来执行跳转效果
                    setInterval(() => {
                        // 输出倒计时文字内容
                        // 其中的秒数,是通过变量输出的
                        oDiv.innerHTML = `登录成功,${int}秒后,跳转百度`;
                        // 数值--,执行倒计时效果
                        int--;
                        // 当变量数值为0时,也就是倒计时的时间到达
                        if(int == 0){
                            // 跳转页面
                            window.location.href = 'http://www.baidu.com';
                        }
                    }, 1000);
                }
            }
        })

        // 总结
        // 之前是通过 form表单 来传参,现在是通过ajax来传参
        // 实际项目中 form表单 和 ajax传参都要使用
        // 如果有页面跳转,使用form表单
        // 如果不需要页面跳转,使用ajax发送请求

        // ajax的步骤
        // 1,创建ajax对象
        // 2,设定ajax访问的基本数据
        //   参数1:请求方式
        //   参数2:请求地址
        //         get方式,在请求地址后,拼接参数,语法与超链接传参语法相同
        // 3,发送请求
        // 4,获取请求结果
        //   根据不同的请求结果,执行不同的程序


    </script>

php
在这里插入图片描述
utils.js

// 定义一个js外部文件
// 存储各种要使用的函数
// 将来通过外部文件的形式,来加载js文件,执行js函数


// 设定cookie函数

function mySetCookie(key,value,time){
    // JavaScript中,时间单位默认是毫秒
    // 获取当前时间对象
    const nowTime = new Date();
    // 当前时间的时间戳和服务器时间,有8个小时的时差 -8小时的毫秒数
    // 设定cookie时效时间 + 时间的毫秒数
    let t = nowTime.getTime() - (8*60*60*1000) + time*1000;
    // 将新的时间戳,设定给 时间对象
    nowTime.setTime(t);
    // 通过三元运算符,给 expires 赋值 如果没有时间参数,赋值空字符串,有时间参数,赋值时间对象
    document.cookie = `${key}=${value};expires=${time === undefined ? '' : nowTime }`;
}

// 获取cookie函数

function myGetCookie(cookieStr){
    const obj = {};
    const arr1 = cookieStr.split('; ');
    arr1.forEach((item)=>{
        const newArr = item.split('=');
        obj[newArr[0]] = newArr[1];
    })
    return obj;
}

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax的get的demo

一.ajax_get_demo1ajax请求demo1,get请求二.ajax_get_demo2ajax请求demo2,get携带参数请求三.ajax_get_demo3ajax请求demo3,简单的登录效果四.ajax_get_demo4ajax请求demo4,简单的登录效果,根据响应体,执行不同操作html <style> div{ ...
复制链接

扫一扫

专栏目录