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

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

  
// 定义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'] . "
";  
        echo "Message: " . $responseData['msg'] . "
";  
  
        if ($responseData['code'] == 200) { // 200表示成功  
            $data = $responseData['data'];  
            echo "查询的号码: " . $data['mobile'] . "
";  
            echo "查询的余额: " . $data['curFee'] . "
";  
            echo "账户剩余余额: " . $data['mobile_fee'] . "
";  
            echo "号码省份: " . $data['province'] . "
";  
            echo "号码地市: " . $data['city'] . "
";  
            echo "最新运营商名称: " . $data['sp'] . "
";  
            echo "原始运营商名称: " . $data['pri_sp'] . "
";  
        } else {  
            echo "Error: " . $responseData['msg'];  
        }  
    } else {  
        echo 'JSON Decode Error: ' . json_last_error_msg();  
    }  
}  
  
// 关闭cURL会话  
curl_close($ch);  
?>

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

DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>手机号码话费余额查询title>  
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">  
	
	
    <script src="https://code.jquery.com/jquery-3.5.1.min.js">script> 
    
	
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/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>  
    <div class="container mt-5">  
        <div class="card">  
            <div class="card-header">  
                <h3 class="card-title text-center">手机号码话费余额查询h3>  
            div>  
            <div class="card-body">  
                <form id="queryForm">  
                    <div class="form-group">  
                        <label for="mobile">手机号码label>  
                        <input type="text" class="form-control" id="mobile" name="mobile" placeholder="请输入手机号码" required>  
                    div>  
                    <div class="form-group">  
                        <label for="workType">运营商类别label>  
                        <select class="form-control" id="workType" name="work_type" required>  
							<option value=" ">自动识别option> 
                            <option value="移动">移动option>  
                            <option value="电信">电信option>  
                            <option value="联通">联通option>  
                        select>  
                    div>  
                    <button type="submit" class="btn btn-primary btn-block n">查询button>  
                form>  
				 
                <div id="result" class="mt-3">  
                    <h4 class="text-center">查询结果h4>  
					<div id="alertContainer" class="mt-3">div> 
                    <ul class="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/13
                var apiKey = '你的key'; // 请在此处替换为你的API key  
                var apiUrl = `https://api.taolale.com/api/Inquiry_Phone_Charges/get?key=${apiKey}&mobile=${mobile}&work_type=${workType}`;  
  
                // 弹出提示框（加载中...）  
                var alertDiv = $('' +  
                    '加载中... 请稍等...' +  
                    '' +  
                '
');  
                $('#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(`手机号码: ${data.mobile}`);  
                            resultList.append(`当前余额: ${data.curFee} 元`);  
                            resultList.append(`账户剩余余额: ${data.mobile_fee} 元`);  
                            resultList.append(`号码省份: ${data.province}`);  
                            resultList.append(`号码地市: ${data.city}`);  
                            resultList.append(`最新运营商名称: ${data.sp}`);  
                            resultList.append(`原始运营商名称: ${data.pri_sp}`);  
                        } else {  
							// 如果查询失败，则弹出错误提示框  
							var errorDiv = $('' +  
							'查询失败！' +  
							'' + response.msg +"   ||  "+ response.data + '
' +  
							'' +  
							'
');  
							$('#alertContainer').html(errorDiv);  
							} 
                    },  
							error: function(xhr, status, error) {  
							// 如果请求失败，则弹出错误提示框  
							var errorDiv = $('' +  
							'请求失败！' +  
							'' + xhr.responseText || '无法连接到服务器，请稍后再试。' + '
' +  
							'' +  
							'
');  
							$('#alertContainer').html(errorDiv);  
							}   
                });  
            });  
        });  
    script>  
body>  
html>

评论记录：