使用HTML前端+CSS+JS+Ajax+快递API搭建一个快递查询网站

2024-9-5

一、软件环境要求

此快递页面使用HTML前端+CSS+JS+Ajax搭建一个简洁、美观、适配手机端PC端的快递API查询页面。
工具：HBuilder X编辑器，本站作者使用的是HBuilder X编辑器，也可以用别的编辑器代替，这里不强制要求。
申请快递API查询接口：林魂云API ,目前申请API接口均免费。

二、快递API接口参数

接口地址：https://api.linhun.vip/api/express
返回格式：JSON
请求方式：GET/POST
请求示例：https://api.linhun.vip/api/express?nu=78698135807064&apiKey=API接口密钥
注意：请求示例中参数第一个是问号例如《?》,其他参数都是《&》,请求示例对比请求参数说明，或对比其他接口来使用，apiKey在右上角后台进去生成，地址：林魂云API
请求参数说明：

名称	必填	类型	说明
nu	是	string	快递单号
text	是	string	返回文本格式

返回参数说明：

名称	类型	说明
fhd	string	发货地
kdcode	string	快递状态
ico	string	快递图标
kdby	string	快递标语
kdgs	string	快递公司
jiancheng	string	简称
qsd	string	签收地
fstime	string	发送时间
gtime	string	物流更新时间
gxbody	string	物流更新内容

错误码格式说明：

名称	类型	说明
201	string	缺少参数
202	string	错误信息
203	string	其他

三、示例代码

创建一个index.html页面，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>快递查询</title>
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style href="./index.css"></style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="./index.js"></script>
</head>
<body>
    <div id="container">
        <h1>快递查询</h1>
        <input type="text" id="numInput" placeholder="请输入快递单号">
        <p>
        <button id="queryBtn">查询</button>
        <div id="result"></div>
    </div>
</body>
</html>

创建一个index.css页面，代码如下：

body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        #container {
            /*width: 400px;*/
            margin: 0 auto;
            background-color: #fff;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
        }
        input[type="text"] {
            width: 100%;
               padding: 10px 0px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        button {
            display: block;
            width: 100%;
            padding: 10px;
            font-size: 16px;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        #result {
            margin-top: 20px;
        }
        .row {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 3px;
        }
        .gxbody {
            font-weight: bold;
        }
        .gtime {
            font-size: 12px;
            color: #666;
        }

创建一个index.js页面，代码如下：

$(document).ready(function() {
            $('#queryBtn').click(function() {
                var nu = $('#numInput').val();

                // 发送Ajax请求
                $.ajax({
                    url: 'https://api.linhun.vip/api/express?apiKey=f855WsifnqQ5FWy1CIfFpu7wzuIF/iHjt5OygEIGXK7QIRsewQ',
                    type: 'GET',
                    data: {nu: nu},
                       dataType: "json",
                    success: function(data) {
                   if(Array.isArray(data)){
                        // 解析JSON并提取所需信息
                        var data = JSON.parse(data);
                   }
                        if (data.code === 200) {
                            var wuliu = data.wuliu;
                            var resultHtml = '';

                            for (var i = 0; i < wuliu.length; i++) {
                                var gxbody = wuliu[i].gxbody;
                                var gtime = wuliu[i].gtime;

                                resultHtml += '<div class="row">';
                                resultHtml += '<div class="gxbody">' + gxbody + '</div>';
                                resultHtml += '<div class="gtime">' + gtime + '</div>';
                                resultHtml += '</div>';
                            }

                            // 显示查询结果
                            $('#result').html(resultHtml);
                        } else {
                            // 如果code不是200，则显示返回的msg
                            $('#result').html(data.msg);
                        }
                    },
                    error: function() {
                        // 处理错误
                        $('#result').html('查询出错');
                    }
                });
            });
        });

阅读剩余

作者：Lonelycity

链接：https://blog.xy302.cn/22.html

文章版权归作者所有，未经允许请勿转载。

THE END