用JS进行MD5加密，实现签名验证完成快递单号查询接口

网友留言说，想调用快递鸟API接口实现快递查询，但是又不懂后端开发，不懂JAVA，不懂PHP，不懂C#，也不懂python，问我能不实现快递接口查询，我说你会什么，他说,我只懂一点点JS，

我回答他，已经足够了，我现在就来告诉你如何通过JS来实现600多家的物流轨迹查询。

你只需要一步，新建一个Text文本，把下面这段代码复制进去，替换你自己的快递鸟ID和APIkey, 将txt后缀改成HTML，用浏览器预览就可以看到效果。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JS调用快递鸟API接口</title>
    <meta charset="utf-8" />
    <script src="/base64.js"></script>
    <script src="/md5.js"></script>
    <script src="/jquery.json-2.2.min.js"></script>
    <script src="/common.js"></script>
    <script type="text/javascript">

        function GetAPI() {      
            var key="快递鸟API Key";
            var id = "快递鸟注册ID号";
            var requestData="{'OrderCode':'','ShipperCode':'ZTO','LogisticCode':'78120038107849'}";
            //MD5加密
            var md5str = md5(requestData + key).toLowerCase();
            //base64
            var dataSign = Base64.encode(md5str);
            //拼接字符串（快递鸟请求报文格式）url编码 
            var reqData = "RequestData=" + escape(requestData) + "&EBusinessID=" + id + "&RequestType=1002&DataSign=" + escape(dataSign) + "&DataType=2";    
            //reqData = "RequestData=%7b%27OrderCode%27%3a%27%27%2c%27ShipperCode%27%3a%27ZTO%27%2c%27LogisticCode%27%3a%2778120038107849%27%7d&EBusinessID=1264783&RequestType=1002&DataSign=NzMxNTAzZWYxYTJiOGIyMDhiNTVjMTc4MDQ0NjdlZDg%3d&DataType=2";
             
            //调用
            SubmitPost({
                method: 'post',
                url: '/api/dist',
                data: reqData,
                beforeSend: function (xhr) {
                    //调用前触发，如加载效果等
                },
                success: function (data, status) {
                    if (status) {
                        document.getElementById("msg").innerHTML = "";
                        for (var i = 0,
   len = data.Traces.length; i < len; i++) {

                            var acceptTime = data.Traces[i].AcceptTime;
                            var acceptStation = data.Traces[i].AcceptStation;
                            //页面展示效果自己开发,这里只实现功能
                            document.getElementById("msg").innerHTML += acceptTime + "  " + acceptStation+"<br/>";
                        }
                       } 
                },
                error: function (data, status, e) {
                    if (data.status == "401") {
                        alert(data.status);
                        return;
                    }
                    

                }
            });
        }
    </script>

</head>
<body>

    <input id="Button1" onclick="GetAPI();" type="button" value="JS调用快递鸟API接口" />

    <div id="msg"></div>
</body>
</html>

运行效果如下：

注意：

于各大商家来说，快递物流是每天必不可少的东西，基本上每天都要反复查询好多遍物流信息，那么就会有很多商家在想如何将整个物流信息导出保存在本地，能够更方便后续查看，市面上现在有很多软件可以批量查询或是生成表格，但是既能够批量查询物流又能够自动生成并导出的软件并没有很多，今天就给大家介绍一款比较全方面的快递查询软件，叫做固乔快递查询助手，下面我们就一起来看下具体有哪些功能操作吧。

1、首先我们先将【固乔快递查询助手】下载到本地，打开后可以看到软件内有大量的快递功能。

2、我们事先将需要查询的快递单号准备好，并选择快递接口，大家根据自己需要查询的快递公司来选择。

3、打开添加单号的功能，将所有单号都添加进去，点击确认添加即可，这样所有的物流信息都会显示在表格里。

4、有时候会出现没有物流信息的情况，我们只需要刷新一下无信息的物流即可，完成以后就可以将表格以CSV、XLS、HTML的形式导出。

5、大家还可以将表格一键批量复制单号或是批量复制单号及公司，粘贴直其他地方，给用户提供了最大的便利。

6、今天的分享就到这里啦，如果有需要批量查询快递、批量复制快递单号以及生成、导出表格的小伙伴，可以下载一个【固乔快递查询助手】。

言

全国快递物流查询 API 是一种提供实时、准确、可靠的快递物流信息查询服务的接口。它基于现有的物流信息系统，通过API接口的方式，向用户提供快递物流信息的查询、跟踪、统计等功能。使用全国快递物流查询 API，用户可以在自己的应用程序或网站上，快速、方便地查询快递物流信息。

本文从全国快递物流查询 API 的工作原理开始说起，给出包括 API 的应用场景、如何调用以及实际代码示例，供大家参考。

工作原理

全国快递物流查询 API 的工作原理比较简单，通过请求第三方数据源获取最新的快递物流信息，再进行处理和解析，最终返回标准格式的数据给用户，我们可以参考下图的工作过程：

主要应用场景

全国快递物流查询 API 的应用场景广泛，能够帮助各个行业和场景中的用户快速查询、管理和分析快递物流信息，提高工作效率和服务质量。

全国快递物流 API 使用教程

APISpace 是国内一个较大的 API 供应平台，提供多种类型的 API 接口，包括手机号码归属地查询 API 、天气预报查询API、手机在网状态 API 、反欺诈（羊毛盾）API 以及当前比较热门的 AI 绘画 API 等等，感兴趣的小伙伴可以去官网体验一下。

1.申请 API 密钥

用户需要在 API 提供商的官方网站进行注册，并申请 API 密钥，获得 API 接口调用的权限。

以 APISpace 为例，使用全国快递物流 API 的步骤通常如下：

进入全国快递物流 API 详情页，点击【免费试用】或者【注册】都可以获取 API 密钥。

访问地址：

https://www.apispace.com/eolink/api/wlgj1/introduction?utm_source=tth&utm_content=high021&utm_term=qqwl

注册成功后，我们在页面导航菜单点击【我的 API】进入【访问控制】页面，即可看到平台提供的密钥。

2.在线测试 API

点击免费试用成功后，系统会自动进入 API 的测试界面，如下图，我们只需要填入快递公司名称以及单号就能获取到完整的快递轨迹信息

3.使用代码接入 API 接口 - JS 方式

var data = "{\"cpCode\":\"YTO\",\"mailNo\":\"YTO1111111111\",\"tel\":\"13000000000或0000\",\"orderType\":\"asc\"}"

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
        console.log(this.responseText);
    }
});

xhr.open("POST", "https://eolink.o.apispace.com/wlgj1/paidtobuy_api/trace_search");
xhr.setRequestHeader("X-APISpace-Token","替换成平台提供的 API");
xhr.setRequestHeader("Authorization-Type","apikey");
xhr.setRequestHeader("Content-Type","application/json");

xhr.send(data);

其他语言的接入可以点【接入指南】查看，包括Java、微信小程序等多种示例语言都整理出来了。

4.物流轨迹数据展示

根据 API 返回的结果

{
    "traceId": "xxx",
    "trace_id": "xxx",
    "success": true,
    "logisticsTrace": {
        "theLastTime": "2023-04-13 13:33:17",
        "cpCode": "EMS",
        "cpUrl": "https://www.ems.com.cn/",
        "takeTime": "2天21小时27分",
        "logisticsStatusDesc": "已代收",
        "logisticsTraceDetailList": [{
            "areaCode": "xxx",
            "areaName": "天津,天津市,武清区",
            "subLogisticsStatus": "ACCEPT",
            "time": 1681113967000,
            "logisticsStatus": "ACCEPT",
            "desc": "【天津市武清区电商客户揽投部】已收寄,揽投员:xxx,电话:185xxxxxxx4"
        }, {
            "areaCode": "CN120114000000",
            "areaName": "天津,天津市,武清区",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681124599000,
            "logisticsStatus": "TRANSPORT",
            "desc": "离开【天津市武清区电商客户揽投部】,下一站【天津邮件处理中心包件车间】"
        }, {
            "areaCode": "CN120100000000",
            "areaName": "天津,天津市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681134781000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到达【天津邮件处理中心包件车间】"
        }, {
            "areaCode": "CN120100000000",
            "areaName": "天津,天津市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681141155000,
            "logisticsStatus": "TRANSPORT",
            "desc": "离开【天津邮件处理中心包件车间】,下一站【广州市江高包件车间】"
        }, {
            "areaCode": "CN440100000000",
            "areaName": "广东省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681281085000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到达【xx车间】"
        }, {
            "areaCode": "CN440100000000",
            "areaName": "广东省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681297051000,
            "logisticsStatus": "TRANSPORT",
            "desc": "离开【xx车间】,下一站【xx车间】"
        }, {
            "areaCode": "CN442000000000",
            "areaName": "广东省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681307392000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到达【xx车间】（经转）"
        }, {
            "areaCode": "CN442000000000",
            "areaName": "广东省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681318786000,
            "logisticsStatus": "TRANSPORT",
            "desc": "离开【xxx车间】,下一站【xxx处理车间】（经转）"
        }, {
            "areaCode": "CN440100000000",
            "areaName": "广东省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681331119000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到达【xxx处理车间】"
        }, {
            "areaCode": "CN440100000000",
            "areaName": "广东省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681337879000,
            "logisticsStatus": "TRANSPORT",
            "desc": "离开【xxx处理车间】,下一站【xxx揽投部】"
        }, {
            "areaCode": "CN440113000000",
            "areaName": "广东省,xx市,xx区",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681342169000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到达【xxxx投部】"
        }, {
            "areaCode": "CN440113000000",
            "courier": "xxx",
            "areaName": "广东省,xx,xx区",
            "subLogisticsStatus": "DELIVERING",
            "courierPhone": "13xxxxxxxxx",
            "time": 1681352410000,
            "logisticsStatus": "DELIVERING",
            "desc": "【xxx揽投部】安排投递,投递员:xxx，电话:1xxxxxxxxxx,揽投部电话:0xx-xxxxxxx2"
        }, {
            "areaCode": "CN440100000000",
            "courier": "xxx",
            "areaName": "广东省,xxx市",
            "subLogisticsStatus": "xxx",
            "courierPhone": "1xxxxxxxxx3",
            "time": 1681363997000,
            "logisticsStatus": "AGENT_SIGN",
            "desc": "已签收,他人代收:xxxxx,投递员:xxx,电话:1xxxxxxxxx"
        }],
        "mailNo": "9853491117528",
        "cpMobile": "xxx",
        "theLastMessage": "已签收,他人代收:xxxxx,投递员:xxx,电话:1xxxxxxxxx",
        "logisticsCompanyName": "EMS",
        "courier": "xxx",
        "courierPhone": "1xxxxxxxxxx",
        "logisticsStatus": "xxx"
    }
}

物流信息展示代码示例( 原生JS + HTML + CSS)

下面的代码是手敲的，有错误欢迎评论区指正~

Html

<div class="" id="logistics-trace"></div>

Css

样式觉得简陋的话可以自行调整

<style>
    .logistics-trace {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
    .logistics-trace li {
      width: 180px;
      margin: 10px;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      text-align: center;
      position: relative;
    }
    .logistics-trace li:after {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #ddd;
      background-color: #fff;
      position: absolute;
      top: -10px;
      left: calc(50% - 10px);
      z-index: 1;
    }
    .logistics-trace li:before {
      content: "";
      display: block;
      width: 2px;
      height: 100%;
      border-left: 1px solid #ddd;
      position: absolute;
      top: 10px;
      left: calc(50% - 1px);
      z-index: 1;
    }
    .logistics-trace li:first-child:before {
      display: none;
    }
    .logistics-trace li:last-child:after {
      display: none;
    }
    .logistics-time {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .logistics-status {
      font-size: 12px;
      margin-bottom: 5px;
    }
    .logistics-desc {
      font-size: 12px;
    }
    .logistics-status.accept {
      color: green;
    }
    .logistics-status.transport {
      color: blue;
    }
    .logistics-status.delivering {
      color: red;
    }
  </style>

JS

使用 JS 对返回的物流信息做处理

function generateLogisticsTrace(logisticsTraceData) {
      const logisticsTraceDetailList = logisticsTraceData.logisticsTrace.logisticsTraceDetailList;
      let logisticsTrace = '<ul>';
      logisticsTraceDetailList.forEach((logisticsTraceDetail, index) => {
        let logisticsStatus = '';
        let logisticsStatusDesc = '';
        let desc = logisticsTraceDetail.desc;
        let time = new Date(logisticsTraceDetail.time).toLocaleString();
        if (logisticsTraceDetail.subLogisticsStatus === 'ACCEPT') {
          logisticsStatus = 'accept';
          logisticsStatusDesc = '揽收';
        } else if (logisticsTraceDetail.subLogisticsStatus === 'TRANSPORT') {
          logisticsStatus = 'transport';
          logisticsStatusDesc = '运输';
        } else if (logisticsTraceDetail.subLogisticsStatus === 'DELIVERING') {
          logisticsStatus = 'delivering';
          logisticsStatusDesc = '派送';
          desc = '【' + logisticsTraceDetail.areaName + '】' + logisticsTraceDetail.desc.replace('，', ',<br>投递员：');
        }
        logisticsTrace += `
          <li class="${logisticsStatus}">
            <div class="logistics-time">${time}</div>
            <div class="logistics-status">${logisticsStatusDesc}</div>
            <div class="logistics-desc">${desc}</div>
          </li>
        `;
        if (index === logisticsTraceDetailList.length - 1) {
          logisticsTrace += '</ul>';
        }
      });
      return logisticsTrace;
    }

调用

在线咨询

上一篇：HTML基础知识之DIV
下一篇：Javascript之选项卡

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商