求助：如何为HTML/CSS登录页实现JavaScript API登录请求及跳转

第一步：确认你的HTML表单结构 #

先确保登录表单里的输入框和按钮有明确的id，这样JavaScript才能准确获取到它们的值。比如：

<form id="loginForm">
  <input type="text" id="username" placeholder="用户名">
  <input type="password" id="password" placeholder="密码">
  <button type="button" id="loginBtn">登录</button>
</form>

（如果你的HTML已经有类似结构，只需要确保id和下面JS里的对应上就行）

第二步：编写JavaScript逻辑 #

把这段代码放在HTML的</body>标签之前，或者单独的.js文件中：

// 获取DOM元素
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const loginBtn = document.getElementById('loginBtn');

// 给登录按钮添加点击事件
loginBtn.addEventListener('click', async () => {
  // 获取输入值，去除前后空格
  const username = usernameInput.value.trim();
  const password = passwordInput.value.trim();

  // 先验证输入是否为空
  if (!username || !password) {
    alert('请输入用户名和密码');
    return;
  }

  try {
    // 发送登录请求
    const response = await fetch('https://fakestoreapi.com/auth/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username: username,
        password: password
      })
    });

    // 处理响应
    if (!response.ok) {
      throw new Error('登录失败，请检查用户名或密码');
    }

    const data = await response.json();
    // 登录成功，把返回的token存起来（后续权限页面可复用）
    localStorage.setItem('authToken', data.token);
    // 跳转到仪表盘页面
    window.location.href = 'dashboard.html';
  } catch (error) {
    // 捕获错误并提示用户
    alert(error.message);
  }
});

关键知识点说明 #

• async/await：让异步请求代码更易读，避免嵌套回调
• fetch：浏览器内置的HTTP请求API，无需额外引入库
• localStorage：持久存储登录凭证，后续访问受限页面时可验证身份
• 错误处理：用try/catch捕获网络异常或登录失败场景，给用户明确提示

测试用账号（来自官方文档） #

可以用以下账号快速测试功能：

• 用户名：mor_2314
• 密码：83r5^_

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