如何将REST API集成到HTML网站 实现点击按钮调用WaitlistAPI

解决方案 #

你可以通过监听表单提交事件+Fetch API实现需求，完整可直接使用的代码如下：

<section class="waitlist">
  <form id="waitlistForm">
    <input type="email" id="emailInput" name="email" placeholder="Enter Email" required>
    <button type="submit">Join Waitlist</button>
  </form>       
</section>

<script>
// 监听表单提交事件
document.getElementById('waitlistForm').addEventListener('submit', async function(e) {
  // 阻止表单默认提交跳转行为
  e.preventDefault();
  // 获取用户输入的邮箱
  const email = document.getElementById('emailInput').value.trim();
  const submitBtn = this.querySelector('button');
  
  // 提交中状态提示，避免重复提交
  const originalBtnText = submitBtn.textContent;
  submitBtn.textContent = '提交中...';
  submitBtn.disabled = true;

  try {
    // 调用Waitlist API，此处替换为你实际的API请求地址、请求头、参数格式
    const response = await fetch('替换为你的Waitlist API实际请求地址', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 如果API要求鉴权，在这里加Authorization头，比如 'Authorization': 'Bearer 你的API密钥'
      },
      body: JSON.stringify({
        email: email
        // 如果API要求其他参数，在这里补充
      })
    });

    if (response.ok) {
      alert('成功加入等候名单！');
      // 提交成功后清空输入框
      document.getElementById('emailInput').value = '';
    } else {
      const errorData = await response.json().catch(() => null);
      alert(`提交失败：${errorData?.message || '请检查输入后重试'}`);
    }
  } catch (error) {
    alert(`网络错误：${error.message || '请稍后再试'}`);
  } finally {
    // 恢复按钮状态
    submitBtn.textContent = originalBtnText;
    submitBtn.disabled = false;
  }
});
</script>

注意事项 #

• 请将代码中的替换为你的Waitlist API实际请求地址修改为API提供的真实调用地址
• 如果API有特殊的请求头、参数格式要求，按照API文档调整headers和body内的字段即可
• 代码已经做了重复提交限制、错误提示处理，可直接上线使用

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