如何从HTML表单调用现有REST API？含JS调用及网页创建疑问

嘿，我来帮你一步步搞定这个问题！既然你已经有现成的REST API（还在移动应用里用过登录功能），那剩下的就是把网页和API对接起来，其实没那么复杂，咱们拆解来看：

一、HTML页面的创建与放置位置 #

首先，HTML页面就是普通的静态网页文件，怎么放取决于你的API部署情况：

• 同服务器/同域名：如果你的API后端（比如Node.js、Python Flask）本身可以托管静态文件，直接把HTML文件放到后端指定的静态目录里就行。比如用Express的话，你会配置app.use(express.static('public'))，那把HTML丢进public文件夹，访问http://你的服务器域名/你的页面文件名.html就能打开。
• 跨域名/本地测试：如果API在另一个服务器，或者你想先本地测试HTML，那只要API配置了CORS（跨域资源共享），你直接在本地打开HTML文件就能发起请求。要是没配置CORS，浏览器会拦截请求，这时候得在API后端加CORS支持（比如Express用cors中间件）。

给你个基础的HTML模板，直接用就行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>查看Mongo数据</title>
    <style>
        .container { max-width: 800px; margin: 30px auto; padding: 0 20px; }
        button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        .data-display { margin-top: 20px; padding: 15px; border: 1px solid #eee; border-radius: 4px; white-space: pre-wrap; }
        .login-section { margin-bottom: 20px; padding: 15px; border: 1px solid #eee; border-radius: 4px; }
        .login-section input { margin: 0 10px 10px 0; padding: 8px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>数据库数据查看器</h1>
        <!-- 登录区域（如果API需要身份验证） -->
        <div class="login-section">
            <input type="text" id="username" placeholder="用户名">
            <input type="password" id="password" placeholder="密码">
            <button id="loginBtn">登录</button>
        </div>
        <!-- 数据获取按钮与展示区域 -->
        <button id="fetchDataBtn">获取数据库数据</button>
        <div id="dataDisplay" class="data-display"></div>
    </div>

    <script>
        // 这里写JS逻辑
    </script>
</body>
</html>

二、用JavaScript按钮点击事件调用REST API #

核心是用浏览器原生的fetch API（不用额外装库，简单方便）来发起请求。因为你有登录功能，重点要注意身份验证的传递——和移动应用一样，登录后拿到的token要在请求数据时带上。

1. 先实现登录逻辑（获取token） #

和移动应用的登录请求逻辑一致，把用户名密码发给登录接口，拿到token后存在localStorage里（这样页面刷新也不会丢）：

document.getElementById('loginBtn').addEventListener('click', async () => {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    try {
        // 替换成你的登录API地址
        const response = await fetch('http://你的API域名/api/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, password })
        });

        if (!response.ok) {
            throw new Error(`登录失败，状态码：${response.status}`);
        }

        const result = await response.json();
        // 把token存在localStorage
        localStorage.setItem('authToken', result.token);
        alert('登录成功！现在可以获取数据了');
    } catch (err) {
        document.getElementById('dataDisplay').textContent = `登录出错：${err.message}`;
    }
});

2. 点击按钮获取并展示数据 #

登录后，点击按钮时带上token请求数据，然后把数据展示在页面上：

document.getElementById('fetchDataBtn').addEventListener('click', async () => {
    const token = localStorage.getItem('authToken');
    if (!token) {
        alert('请先登录！');
        return;
    }

    try {
        // 替换成你的获取数据API地址
        const response = await fetch('http://你的API域名/api/get-data', {
            headers: {
                // 这里要和移动应用里的请求头一致，比如JWT的话用Bearer格式
                'Authorization': `Bearer ${token}`
            }
        });

        if (!response.ok) {
            throw new Error(`请求失败，状态码：${response.status}`);
        }

        const data = await response.json();
        // 把数据格式化展示，用<pre>标签保留JSON格式
        document.getElementById('dataDisplay').innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    } catch (err) {
        document.getElementById('dataDisplay').textContent = `获取数据出错：${err.message}`;
    }
});

3. 如果API不需要身份验证（可选） #

要是你的获取数据接口不需要登录，直接简化成：

document.getElementById('fetchDataBtn').addEventListener('click', async () => {
    try {
        const response = await fetch('http://你的API域名/api/get-data');
        if (!response.ok) throw new Error(`请求失败：${response.status}`);
        const data = await response.json();
        document.getElementById('dataDisplay').innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    } catch (err) {
        document.getElementById('dataDisplay').textContent = `出错：${err.message}`;
    }
});

三、关键注意事项 #

• CORS配置：如果网页和API不在同一个域名，必须在API后端开启CORS，不然浏览器会拦截请求。比如Express里安装cors包，然后app.use(cors())；Flask用flask-cors扩展。
• 请求一致性：确保网页里的请求方法、请求头、参数和移动应用里的完全一致，比如移动应用用POST，网页也别用GET；移动应用带的token字段是Token，网页就别写成Authorization。
• 数据展示优化：上面用JSON.stringify是快速展示的方式，你可以根据数据结构生成更友好的界面，比如遍历数组生成HTML表格：

  // 示例：把数组数据转成表格
  if (Array.isArray(data)) {
      let table = '<table border="1"><thead><tr>';
      // 取第一个对象的键作为表头
      Object.keys(data[0]).forEach(key => table += `<th>${key}</th>`);
      table += '</tr></thead><tbody>';
      // 遍历数据生成行
      data.forEach(item => {
          table += '<tr>';
          Object.values(item).forEach(val => table += `<td>${val}</td>`);
          table += '</tr>';
      });
      table += '</tbody></table>';
      document.getElementById('dataDisplay').innerHTML = table;
  }
  

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