如何实现按钮提交车牌信息、跳转新页面并加载API返回的JSON数据？

我明白你现在的需求——把输入表单单独放在index页面，提交后跳转到另一个页面加载并展示汽车牌照对应的API数据对吧？其实核心就是把用户输入的牌照号传递到目标页面，然后在目标页面发起API请求就行，我给你一步步拆解：

第一步：修改Index页面的表单，处理输入并传递参数 #

你有两种方式实现参数传递，选哪种都可以：

方式1：纯HTML表单提交（最简单）

直接让表单提交到结果页面，用GET方法把牌照号作为URL参数传递：

<!-- index.html -->
<form id="vehicle-smart-sample-form" action="results.html" method="GET">
  <label for="reg">Enter your reg:</label>
  <input type="text" id="reg" name="reg" required placeholder="e.g. ABC123">
  <button type="submit">Load Vehicle Info</button>
</form>

提交后浏览器会跳转到类似 results.html?reg=ABC123 的地址，牌照号就跟着传过去了。

方式2：JavaScript控制跳转（适合加输入验证）

如果需要先验证输入格式再跳转，用JS阻止默认提交，手动处理参数传递：

<!-- index.html -->
<form id="vehicle-smart-sample-form">
  <label for="reg">Enter your reg:</label>
  <input type="text" id="reg" name="reg" required placeholder="e.g. ABC123">
  <button type="submit">Load Vehicle Info</button>
</form>

<script>
document.getElementById('vehicle-smart-sample-form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认表单提交行为
  const regNumber = document.getElementById('reg').value.trim();
  
  // 简单的格式验证（你可以根据需求调整规则）
  const regPattern = /^[A-Z0-9]+$/i;
  if (!regNumber || !regPattern.test(regNumber)) {
    alert('Please enter a valid vehicle registration number');
    return;
  }
  
  // 跳转到结果页面，用encodeURIComponent处理特殊字符
  window.location.href = `results.html?reg=${encodeURIComponent(regNumber)}`;
});
</script>

第二步：在结果页面（results.html）读取参数并加载API数据 #

结果页面需要先从URL里提取牌照号，再发起API请求，最后把数据渲染到页面上：

<!-- results.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Vehicle Details</title>
</head>
<body>
  <h1>Vehicle Information</h1>
  <div id="vehicle-data" style="padding: 20px; border: 1px solid #eee;"></div>

  <script>
    // 从URL中获取指定参数的工具函数
    function getUrlParameter(paramName) {
      const urlParams = new URLSearchParams(window.location.search);
      return urlParams.get(paramName);
    }

    // 获取传递过来的牌照号
    const regNumber = getUrlParameter('reg');

    if (regNumber) {
      // 替换成你的实际API地址
      const apiUrl = `https://your-api-endpoint.com/vehicles?reg=${encodeURIComponent(regNumber)}`;
      
      // 发起API请求
      fetch(apiUrl)
        .then(response => {
          if (!response.ok) {
            throw new Error('Failed to fetch vehicle data');
          }
          return response.json();
        })
        .then(data => {
          // 渲染数据到页面（根据你的API返回结构调整字段）
          const vehicleDataDiv = document.getElementById('vehicle-data');
          vehicleDataDiv.innerHTML = `
            <h2>Details for ${regNumber}</h2>
            <ul>
              <li><strong>Make:</strong> ${data.make || 'N/A'}</li>
              <li><strong>Model:</strong> ${data.model || 'N/A'}</li>
              <li><strong>Year:</strong> ${data.year || 'N/A'}</li>
              <li><strong>Color:</strong> ${data.color || 'N/A'}</li>
            </ul>
          `;
        })
        .catch(error => {
          const vehicleDataDiv = document.getElementById('vehicle-data');
          vehicleDataDiv.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
        });
    } else {
      // 没有传递牌照号的情况
      const vehicleDataDiv = document.getElementById('vehicle-data');
      vehicleDataDiv.innerHTML = `<p>Please go back to the home page and enter a vehicle registration number.</p>`;
    }
  </script>
</body>
</html>

几个需要注意的细节： #

• 跨域问题：如果你的API和前端页面不在同一个域名下，需要确保API支持CORS（跨域资源共享），否则浏览器会阻止请求。
• 参数编码：一定要用 encodeURIComponent() 处理牌照号，避免空格、特殊符号等导致的URL解析错误。
• 错误处理：添加了API请求失败、无参数的情况处理，提升用户体验。

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