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

<!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"; // 添加显示类// 在指定时间后隐藏ToastsetTimeout(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)}// 封装 ajaxfunction 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>