用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小時內與您取得聯系。

整合營銷服務商