查询三网话费余额接口，移动话费余额接口、电信话费余额接口、联通话费余额的接口+html前端查询UI界面

PHP是直接请求的接口，HTML代码也是直接请求的接口。如果HTML想上线运行，还是需要做下安全的。

下边是PHP代码

<?php// 定义API接口地址和参数  $apiUrl="https://api.taolale.com/api/Inquiry_Phone_Charges/get";//API文档地址：https://api.taolale.com/doc/13$apiKey="你的key";// 替换为你的API Key  $mobile="需要查询的手机号码";// 替换为需要查询的手机号码  $workType="运营商类别";// 替换为运营商类别，例如 '移动', '联通', '电信'  // 构建查询字符串  $queryString=http_build_query(['key'=>$apiKey,'mobile'=>$mobile,'work_type'=>$workType]);// 初始化cURL会话  $ch=curl_init();// 设置cURL选项  curl_setopt($ch,CURLOPT_URL,$apiUrl."?".$queryString);// URL + 查询字符串  curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);// 返回响应结果而不是直接输出  curl_setopt($ch,CURLOPT_CUSTOMREQUEST,"POST");// 设置请求方式为POST  curl_setopt($ch,CURLOPT_HTTPHEADER,['application/x-www-form-urlencoded'// 设置请求头]);// 发送请求并获取响应  $response=curl_exec($ch);// 检查是否有错误发生  if(curl_errno($ch)){echo'cURL Error: '.curl_error($ch);}else{// 解码JSON响应  $responseData=json_decode($response,true);// 检查解码是否成功  if(json_last_error()===JSON_ERROR_NONE){// 输出响应数据  echo"Code: ".$responseData['code']."<br>";echo"Message: ".$responseData['msg']."<br>";if($responseData['code']==200){// 200表示成功  $data=$responseData['data'];echo"查询的号码: ".$data['mobile']."<br>";echo"查询的余额: ".$data['curFee']."<br>";echo"账户剩余余额: ".$data['mobile_fee']."<br>";echo"号码省份: ".$data['province']."<br>";echo"号码地市: ".$data['city']."<br>";echo"最新运营商名称: ".$data['sp']."<br>";echo"原始运营商名称: ".$data['pri_sp']."<br>";}else{echo"Error: ".$responseData['msg'];}}else{echo'JSON Decode Error: '.json_last_error_msg();}}// 关闭cURL会话  curl_close($ch);?>

下边是html代码
在这里插入图片描述

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>手机号码话费余额查询</title><linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css"rel="stylesheet"><!-- <link href="./css/bootstrap.min.css" rel="stylesheet">  --><scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js"></script><!-- <script src="./js/jquery-3.5.1.min.js"></script>  --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script><!-- <script src="./js/bootstrap.bundle.min.js"></script>   --><style>body{background-color: #f8f9fa;font-family:'Arial', sans-serif;}.container{max-width: 600px;margin: 50px auto;padding: 20px;background-color: #ffffff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border-radius: 8px;}.alert{margin-top: 20px;}.result-list{margin-top: 20px;}.n{width: 100%;margin-top: 20px;}</style></head><body><divclass="container mt-5"><divclass="card"><divclass="card-header"><h3class="card-title text-center">手机号码话费余额查询</h3></div><divclass="card-body"><formid="queryForm"><divclass="form-group"><labelfor="mobile">手机号码</label><inputtype="text"class="form-control"id="mobile"name="mobile"placeholder="请输入手机号码"required></div><divclass="form-group"><labelfor="workType">运营商类别</label><selectclass="form-control"id="workType"name="work_type"required><optionvalue="">自动识别</option><optionvalue="移动">移动</option><optionvalue="电信">电信</option><optionvalue="联通">联通</option></select></div><buttontype="submit"class="btn btn-primary btn-block n">查询</button></form><divid="result"class="mt-3"><h4class="text-center">查询结果</h4><divid="alertContainer"class="mt-3"></div><ulclass="list-group"id="resultList"></ul></div></div></div></div><script>$(document).ready(function(){$('#queryForm').on('submit',function(e){  
                e.preventDefault();var mobile =$('#mobile').val();var workType =$('#workType').val();//API文档地址：https://api.taolale.com/doc/13var apiKey ='你的key';// 请在此处替换为你的API key  var apiUrl =`https://api.taolale.com/api/Inquiry_Phone_Charges/get?key=${apiKey}&mobile=${mobile}&work_type=${workType}`;// 弹出提示框（加载中...）  var alertDiv =$('<div class="alert alert-info alert-dismissible fade show" role="alert">'+'<strong>加载中...</strong> 请稍等...'+'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>'+'</div>');$('#alertContainer').html(alertDiv);  
  
                $.ajax({  
                    url: apiUrl,  
                    method:'POST',  
                    dataType:'json',success:function(response){// 关闭加载提示框  $('.alert').alert('close');if(response.code ===200){var resultList =$('#resultList');  
                            resultList.empty();var data = response.data;  
                            resultList.append(`<li class="list-group-item">手机号码: ${data.mobile}</li>`);  
                            resultList.append(`<li class="list-group-item">当前余额: ${data.curFee} 元</li>`);  
                            resultList.append(`<li class="list-group-item">账户剩余余额: ${data.mobile_fee} 元</li>`);  
                            resultList.append(`<li class="list-group-item">号码省份: ${data.province}</li>`);  
                            resultList.append(`<li class="list-group-item">号码地市: ${data.city}</li>`);  
                            resultList.append(`<li class="list-group-item">最新运营商名称: ${data.sp}</li>`);  
                            resultList.append(`<li class="list-group-item">原始运营商名称: ${data.pri_sp}</li>`);}else{// 如果查询失败，则弹出错误提示框  var errorDiv =$('<div class="alert alert-danger alert-dismissible fade show" role="alert">'+'<strong>查询失败！</strong>'+'<p>'+ response.msg +"   ||  "+ response.data +'</p>'+'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>'+'</div>');$('#alertContainer').html(errorDiv);}},error:function(xhr, status, error){// 如果请求失败，则弹出错误提示框  var errorDiv =$('<div class="alert alert-danger alert-dismissible fade show" role="alert">'+'<strong>请求失败！</strong>'+'<p>'+ xhr.responseText ||'无法连接到服务器，请稍后再试。'+'</p>'+'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>'+'</div>');$('#alertContainer').html(errorDiv);}});});});</script></body></html>

标签：前端 html ui

本文转载自: https://blog.csdn.net/weixin_47019180/article/details/143496596
版权归原作者 达不刘亿 所有，如有侵权，请联系我们删除。

查询三网话费余额接口，移动话费余额接口、电信话费余额接口、联通话费余额的接口+html前端查询UI界面

发表评论

“查询三网话费余额接口，移动话费余额接口、电信话费余额接口、联通话费余额的接口+html前端查询UI界面”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航