要求快递 - Javascript (1)

📌 相关文章

📜 要求快递 - Javascript (1)

📅 最后修改于: 2023-12-03 15:27:54.443000 🧑 作者: Mango

要求快递 - Javascript

在网上购物是现代人日常生活中的一部分，为了更快地收到购买的商品，我们通常会选择快递服务。开发一款能够根据用户输入的物流公司和运单号快速查询快递配送信息的 JavaScript 应用程序，将是一个实用且有趣的任务。

实现思路

要求快递的 JavaScript 应用程序需要与快递查询接口进行通信，获得快递配送信息。接着，使用 DOM 操作技术，将获取到的信息呈现在用户的浏览器窗口中。

为了实现这个功能，我们需要完成以下步骤：

了解快递查询接口
获取用户输入
向快递查询接口发送请求
解析返回的数据
使用 DOM 操作技术，将数据呈现在用户的浏览器窗口中

1. 了解快递查询接口

在开发要求快递的 JavaScript 应用程序之前，我们需要了解如何与快递查询接口进行通信。在国内，比较常用的快递公司有顺丰、圆通、申通、中通、韵达等，这些快递公司都提供了自己的快递查询接口。

以顺丰为例，顺丰的快递查询接口 URL 是：

http://www.kuaidi100.com/query?type=sf&postid=快递单号

其中，type=sf 是查询顺丰快递；postid 是快递单号。其他快递公司的查询接口 URL 格式类似，只需要将 type 参数替换为相应的快递公司代码即可。

根据用户输入的快递公司和快递单号，我们可以动态生成查询接口 URL：

const company = document.querySelector('#company').value;    // 获取用户输入的快递公司
const num = document.querySelector('#num').value;            // 获取用户输入的快递单号
const url = `http://www.kuaidi100.com/query?type=${company}&postid=${num}`;     // 动态生成查询接口 URL

2. 获取用户输入

接下来，我们需要获取用户输入的快递公司和快递单号，可以使用 HTML 表单元素实现。

在 HTML 文件中添加以下表单元素：

<form>
  <div>
    <label for="company">快递公司：</label>
    <input type="text" id="company">
  </div>
  <div>
    <label for="num">快递单号：</label>
    <input type="text" id="num">
  </div>
  <button type="submit">查询</button>
</form>

<div id="result"></div>

在 JavaScript 中监听表单提交事件，获取用户输入：

const form = document.querySelector('form');
const resultDiv = document.querySelector('#result');

form.addEventListener('submit', e => {
  e.preventDefault();    // 阻止表单提交
  const company = document.querySelector('#company').value;    // 获取用户输入的快递公司
  const num = document.querySelector('#num').value;            // 获取用户输入的快递单号
});

3. 向快递查询接口发送请求

接下来，我们需要向快递查询接口发送请求，获取快递配送信息。可以使用 XMLHttpRequest 实现异步请求。

在 JavaScript 中，使用以下代码创建 XMLHttpRequest 对象：

const xhr = new XMLHttpRequest();

然后，设置请求方法和请求 URL，并发送请求：

xhr.open('GET', url);
xhr.send();

由于是异步请求，我们需要监听 readystatechange 事件，获取服务器返回的数据：

xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);    // 输出返回的数据
  }
}

4. 解析返回的数据

快递查询接口返回的是 JSON 格式的数据，我们需要解析这些数据，并提取出需要的配送信息。

以顺丰快递为例，返回的数据格式如下：

{
    "message": "ok",
    "nu": "SF10123456789",
    "ischeck": 1,
    "com": "顺丰",
    "status": 200,
    "condition": "F00",
    "state": 3,
    "data": [
        {
            "time": "2021-06-15 10:47:23",
            "ftime": "2021-06-15 10:47:23",
            "context": "快件已到达【广州增城区员岗集散点】",
            "location": ""
        },
        ...
    ]
}

我们可以通过以下代码获取配送信息数组，然后遍历数组，将配送信息呈现在用户的浏览器窗口中：

const data = JSON.parse(xhr.responseText);
const deliveries = data.data;    // 获取配送信息数组

// 遍历配送信息数组，将信息呈现在用户的浏览器窗口中
deliveries.forEach(item => {
  const div = document.createElement('div');    // 创建新的 div 元素
  div.textContent = `${item.time} ${item.context}`;    // 设置 div 元素的文本内容
  resultDiv.appendChild(div);    // 将新的 div 元素添加到页面中
});

5. 使用 DOM 操作技术，将数据呈现在用户的浏览器窗口中

最后一步是将获取到的配送信息呈现在用户的浏览器窗口中。我们可以使用 DOM 操作技术来完成这个任务。

在 HTML 中添加一个用于展示配送信息的 <div> 元素：

<div id="result"></div>

在 JavaScript 中获取该元素：

const resultDiv = document.querySelector('#result');

然后，遍历配送信息数组，将每个配送信息条目呈现为一个新的 <div> 元素，最后将这些元素添加到页面中：

const deliveries = data.data;    // 获取配送信息数组

// 遍历配送信息数组，创建新的 div 元素并设置文本内容
deliveries.forEach(item => {
  const div = document.createElement('div');
  div.textContent = `${item.time} ${item.context}`;
  resultDiv.appendChild(div);    // 将新的 div 元素添加到页面中
});

完整代码

下面是实现要求快递的 JavaScript 应用程序的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <title>要求快递 - JavaScript</title>
  </head>
  <body>
    <form>
      <div>
        <label for="company">快递公司：</label>
        <input type="text" id="company">
      </div>
      <div>
        <label for="num">快递单号：</label>
        <input type="text" id="num">
      </div>
      <button type="submit">查询</button>
    </form>

    <div id="result"></div>

    <script>
      const form = document.querySelector('form');
      const resultDiv = document.querySelector('#result');

      form.addEventListener('submit', e => {
        e.preventDefault();
        const company = document.querySelector('#company').value;
        const num = document.querySelector('#num').value;
        const url = `http://www.kuaidi100.com/query?type=${company}&postid=${num}`;

        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.send();

        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4 && xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            const deliveries = data.data;

            deliveries.forEach(item => {
              const div = document.createElement('div');
              div.textContent = `${item.time} ${item.context}`;
              resultDiv.appendChild(div);
            });
          }
        };
      });
    </script>
  </body>
</html>

以上就是要求快递的 JavaScript 应用程序的实现过程。该程序可以根据用户输入的快递公司和快递单号，向快递查询接口发送请求，获取快递配送信息，并将这些信息呈现在用户的浏览器窗口中。