如何在HTML表单集成RapidAPI机场查询接口并解决大小写敏感问题

1. 改造HTML表单结构 #

给"From"和"To"输入框添加唯一标识ID，同时在每个输入框下方新增用于展示机场信息的容器：

<form id="group-request-form">
  <div class="form-group">
    <label>From Airport Code:</label>
    <input type="text" id="from-airport" placeholder="Enter code (e.g. KHI)" maxlength="3">
    <div id="from-airport-info" class="airport-info"></div>
  </div>
  <div class="form-group">
    <label>To Airport Code:</label>
    <input type="text" id="to-airport" placeholder="Enter code (e.g. KHI)" maxlength="3">
    <div id="to-airport-info" class="airport-info"></div>
  </div>
  <!-- 保留你原有表单的其他字段 -->
  <button type="submit">Submit Request</button>
</form>

2. 引入Axios并封装API请求 #

先通过CDN引入Axios（如果你的项目未本地安装），然后封装查询函数，自动将输入代码转为大写解决API大小写敏感问题：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 封装机场查询逻辑
async function fetchAirportInfo(airportCode) {
  // 统一转为大写，彻底解决大小写敏感问题
  const normalizedCode = airportCode.trim().toUpperCase();
  if (!normalizedCode) return null;

  try {
    const response = await axios.get('YOUR_RAPIDAPI_ENDPOINT', {
      headers: {
        'X-RapidAPI-Key': 'YOUR_RAPIDAPI_KEY',
        'X-RapidAPI-Host': 'YOUR_RAPIDAPI_HOST'
      },
      params: {
        code: normalizedCode // 传入标准化后的大写代码
      }
    });
    return response.data; // 根据API实际返回结构调整，比如取response.data.airport等字段
  } catch (error) {
    console.error('Airport lookup failed:', error);
    return null;
  }
}
</script>

3. 添加实时输入监听与结果展示 #

给两个输入框绑定input事件，用防抖函数减少不必要的API请求，同时将查询结果渲染到对应的信息容器：

// 防抖函数：避免输入过程中频繁触发API请求
function debounce(func, delay = 300) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 单输入框的查询逻辑处理
function handleAirportInput(inputId, infoId) {
  const input = document.getElementById(inputId);
  const infoContainer = document.getElementById(infoId);

  const debouncedFetch = debounce(async () => {
    const code = input.value;
    infoContainer.textContent = '';
    if (!code) return;

    const airportData = await fetchAirportInfo(code);
    if (airportData) {
      // 根据API返回的真实字段调整，示例为城市+机场名称
      infoContainer.textContent = `${airportData.city} - ${airportData.name}`;
    } else {
      infoContainer.textContent = '⚠️ Invalid airport code';
    }
  });

  input.addEventListener('input', debouncedFetch);
}

// 初始化两个输入框的监听
handleAirportInput('from-airport', 'from-airport-info');
handleAirportInput('to-airport', 'to-airport-info');

4. 完整可运行代码示例 #

替换RapidAPI相关参数后直接使用：

<!DOCTYPE html>
<html>
<head>
  <title>Group Request Form</title>
  <style>
    .airport-info {
      font-size: 0.9em;
      color: #555;
      margin-top: 6px;
    }
    .form-group {
      margin-bottom: 16px;
    }
    input {
      padding: 4px 8px;
      width: 120px;
    }
  </style>
</head>
<body>
  <form id="group-request-form">
    <div class="form-group">
      <label>From Airport Code:</label>
      <input type="text" id="from-airport" placeholder="e.g. KHI" maxlength="3">
      <div id="from-airport-info" class="airport-info"></div>
    </div>
    <div class="form-group">
      <label>To Airport Code:</label>
      <input type="text" id="to-airport" placeholder="e.g. KHI" maxlength="3">
      <div id="to-airport-info" class="airport-info"></div>
    </div>
    <button type="submit">Submit Request</button>
  </form>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    async function fetchAirportInfo(airportCode) {
      const normalizedCode = airportCode.trim().toUpperCase();
      if (!normalizedCode) return null;

      try {
        const response = await axios.get('https://YOUR_RAPIDAPI_ENDPOINT', {
          headers: {
            'X-RapidAPI-Key': 'YOUR_RAPIDAPI_KEY',
            'X-RapidAPI-Host': 'YOUR_RAPIDAPI_HOST'
          },
          params: {
            code: normalizedCode
          }
        });
        // 假设API返回结构为 { city: "Karachi", name: "Jinnah International Airport" }
        return response.data;
      } catch (error) {
        console.error('Lookup failed:', error);
        return null;
      }
    }

    function debounce(func, delay = 300) {
      let timeoutId;
      return (...args) => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
      };
    }

    function handleAirportInput(inputId, infoId) {
      const input = document.getElementById(inputId);
      const infoContainer = document.getElementById(infoId);

      const debouncedFetch = debounce(async () => {
        const code = input.value;
        infoContainer.textContent = '';
        if (!code) return;

        const data = await fetchAirportInfo(code);
        if (data) {
          infoContainer.textContent = `${data.city} - ${data.name}`;
        } else {
          infoContainer.textContent = '⚠️ Invalid airport code';
        }
      });

      input.addEventListener('input', debouncedFetch);
    }

    handleAirportInput('from-airport', 'from-airport-info');
    handleAirportInput('to-airport', 'to-airport-info');
  </script>
</body>
</html>

关键注意事项 #

• 替换代码中的YOUR_RAPIDAPI_ENDPOINT、YOUR_RAPIDAPI_KEY、YOUR_RAPIDAPI_HOST为你在RapidAPI控制台获取的实际信息
• 根据所调用机场API的真实返回字段，调整fetchAirportInfo函数和结果展示的代码逻辑
• 防抖函数的300ms延迟可根据需求修改，平衡响应速度与请求频率

内容的提问来源于stack exchange，提问作者Forte8