当前位置：首页 > article >正文

原生js封装ajax请求以及css实现提示效果和禁止点击效果

article 2025/1/5 6:12:50

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>本地模式网络切换</title>
    <style>
        .pay-container{
            position: relative;
            overflow: auto;
            background-size: cover;
        }
        .cardBody{
            margin-top: 0;
            padding: 1rem .75rem;
        }
        .main{
            width: 100%;
            background: #FFFFFF;
            padding: .5rem 0 1rem;
            border-radius: 1rem;
        }
        .pay-container .cardBody .main .buyPackageBtn{
            width: 100%;
            height: 2.75rem;
            background: #467EFD;
            border-radius: 1.375rem;
            margin: 1rem auto 0;
            font-size: 1.125rem;
            font-family: PingFangSC;
            border: none;
            cursor: pointer;
            color: #FFFFFF;
        }
        .main .item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1rem;
            font-size: 1rem;
            font-family: PingFangSC;
            color: #333333;
            height: 3.5rem;
            border-bottom: 1px solid #F0F0F0;
        }
        #toast {
            visibility: hidden; /* 默认隐藏 */
            min-width: 250px; /* 设置最小宽度 */
            margin-left: -125px; /* 使toast居中 */
            background-color: rgba(51, 51, 51, 0.6); /* 背景颜色 */
            color: #fff; /* 文本颜色 */
            text-align: center; /* 文本居中 */
            border-radius: 5px; /* 圆角边框 */
            padding: 16px; /* 内边距 */
            position: fixed; /* 固定位置 */
            z-index: 1; /* 置于顶层 */
            left: 50%; /* 水平居中 */
            bottom: 50%; /* 距离底部30px */
            font-size: 17px; /* 字体大小 */
            opacity: 0; /* 透明度 */
            transition: opacity 0.5s; /* 过渡效果 */
        }
 
        /* 显示Toast时的样式 */
        #toast.show {
            visibility: visible;
            opacity: 1;
        }
        .disabled {
            pointer-events: none; /* 禁止点击 */
            opacity: 0.6; /* 可选，增加视觉效果表示不可点击 */
        }
    </style>
</head>
<body>
    <div id="toast"></div>
    <div class="pay-container" id="pay-container">
        <div class="cardBody">
            <div class="main">
                <div class="item">
                    <span>名称：</span>
                    <span id="name"></span>
                </div>
                <div class="item">
                    <span>年龄：</span>
                    <span id="age"></span>
                </div>
                <div class="item">
                    <span>性别：</span>
                    <span id="sex"></span>
                </div>
                <div class="item">
                    <span>电话：</span>
                    <span id="phone"></span>
                </div>
                <button type="button" class="buyPackageBtn" id="dxBtn" onclick="handleChangeNet('0')">姓名一</button>
                <button type="button" class="buyPackageBtn" id="ltBtn" onclick="handleChangeNet('1')">姓名二</button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        // 显示Toast的函数
        function showToast(message, duration = 2000) {
            var toast = document.getElementById("toast");
            toast.innerHTML = message; // 设置Toast内容
            toast.className = "show"; // 添加显示类
            // 在指定时间后隐藏Toast
            setTimeout(function() {
                toast.className = toast.className.replace("show", "");
            }, duration);
        }
        function queryStringify(obj) {
            let str = ''
            for (let k in obj) str += `${k}=${obj[k]}&`
            return str.slice(0, -1)
        }
        // 封装 ajax
        function ajax(options) {
            let defaultoptions = {
                url: "",
                method: "GET",
                async: true,
                data: {},
                headers: {},
                success: function () { },
                error: function () { }
            }
            let { url, method, async, data, headers, success, error } = {
                ...defaultoptions,
                ...options
            }
            if (typeof data === 'object' && headers["content-type"]?.indexOf("json") > -1) {
                data = JSON.stringify(data)
            }else {
                data = queryStringify(data)
            }
            // // 如果是 get 请求, 并且有参数, 那么直接组装一下 url 信息
            if (/^get$/i.test(method) && data) url += '?' + data
            
            // // 4. 发送请求
            const xhr = new XMLHttpRequest()
            xhr.open(method, url, async)
            xhr.onload = function () {
                if (!/^2\d{2}$/.test(xhr.status)) {
                    // console.log(error)
                    error(`错误状态码:${xhr.status}`) //回调
                    return
                }
                // 执行解析
                try {
                    let result = JSON.parse(xhr.responseText)
                    success(result)
                } catch (err) {
                    error('解析失败 ! 因为后端返回的结果不是 json 格式字符串')
                }
            }
            // // 设置请求头内的信息
            for (let k in headers) xhr.setRequestHeader(k, headers[k])
            if (/^get$/i.test(method)) {
                xhr.send()
            } else {
                xhr.send(data)
            }
        }
        function handleChangeNet(num) {
            ajax({
                url:"xxx",
                method:"POST",
                data:{
                    
                },
                headers:{
                    "content-type":"application/json;charset=utf-8"
                },
                success:function(res){
                    if(res.error_code=='0'){
                        showToast("操作成功");
                        getDeviceInfo()
                    }else{
                        showToast("操作失败");
                    }
                },
                error:function(err){
                    console.log("error",err)
                }
            })
        }
        function getDeviceInfo() {
            ajax({
                url:"***",
                method:"POST",
                data:{
                    action:"101",
                },
                headers:{
                    "content-type":"application/json;charset=utf-8"
                },
                success:function(res){
                    if(res.error_code=='0'){
                        var imeiEl = document.getElementById("imei");
                        var nameEl = document.getElementById("wifiName");
                        var passWordEl = document.getElementById("wifiPassword");
                        var curNetEl = document.getElementById("curNet");
                        var dxEl = document.getElementById("dxBtn");
                        var ltEl = document.getElementById("ltBtn");
                        imeiEl.innerHTML = res.device_info.imei;
                        nameEl.innerHTML = res.device_info.ssid;
                        passWordEl.innerHTML = res.device_info.password;
                        if(res.device_info.operator=='中国电信'){
                            curNetEl.innerHTML = '中国电信';
                            ltEl.style.backgroundColor = '#467EFD';
                            ltEl.classList.remove('disabled');
                            dxEl.style.backgroundColor = '#ccc';
                            dxEl.classList.add('disabled');
                        }else{
                            curNetEl.innerHTML = '中国联通';
                            dxEl.style.backgroundColor = '#467EFD';
                            dxEl.classList.remove('disabled');
                            ltEl.style.backgroundColor = '#ccc';
                            ltEl.classList.add('disabled');
                        }
                    }else{
                        showToast("***");
                    }
                },
                error:function(err){
                    console.log("error",err)
                }
            })
        }
        getDeviceInfo()
    </script>
</body>
</html>