原生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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/64904.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/64904.shtml
英文地址，請注明出處：http://en.pswp.cn/web/64904.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！