HTML+JS 实现手机号码归属地查询功能

手机号码归属地 API 是一种提供号码归属地信息的接口，它通过与运营商和电信数据库交互，根据手机号码查询相关归属地信息并返回结果。通过使用手机号码归属地API，开发者可以轻松地集成号码归属地查询功能到他们的应用程序和服务中，为用户提供更好的体验和服务。

功能概述

手机号码归属地查询功能的基本原理是通过用户输入的手机号码，利用手机号码归属地API向运营商和电信数据库发起查询请求，获取该号码的归属地信息，并将结果返回给用户。

{
    "tradeNo": "988818862110298112",
    "chargeStatus": 1,
    "message": "成功",
    "data": {
        "orderNo": "111",
        "handleTime": "2022-06-21 14:53:08",
        "province": "广东",
        "city": "广州",
        "provinceCode": "020",
        "cityCode": "440100",
        "isp": "联通",
        "mobile": "13286457456",
        "postCode": "510000"
    },
    "code": "200000"
}

实现步骤

创建HTML页面：创建一个HTML页面，用于呈现用户界面。可以使用 <input> 元素接收用户输入的手机号码，并通过一个按钮触发查询操作。例如：

<!DOCTYPE html>
<html>
<head>
  <title>号码归属地查询工具</title>
</head>
<body>
  <h1>号码归属地查询工具</h1>
  <input type="text" id="phoneNumber" placeholder="请输入手机号码">
  <button onclick="queryPhoneNumber()">查询</button>
  <div id="result"></div>

  <script src="script.js"></script>

  <!-- todo 引入 JQuery 脚本 -->

</body>
</html>

创建JavaScript 脚本：创建一个JavaScript文件，用于处理用户界面的交互和调用手机号码归属地API。在该文件中，您需要编写函数 queryPhoneNumber() 来发送API请求，并将结果展示给用户。例如：

function queryPhoneNumber() {
   var phoneNumber = document.getElementById("phoneNumber").value;

    var data = {
     "mobile": phoneNumber 
    }

    $.ajax({
        "url":"https://eolink.o.apispace.com/teladress/teladress",
        "method": "POST",
        "headers": {
            "X-APISpace-Token":"使用 APISpace 提供的API 密钥",
            "Authorization-Type":"apikey",
            "Content-Type":"application/x-www-form-urlencoded"
        },
        "data": data,
        "crossDomain": true
    })
        .done(function(response){})
        .fail(function(jqXHR){})

}

注意：上述API 密钥可到 APISpace登录注册获取。