如何在Node.js中使用jQuery从API获取数据并在前端展示？

我来帮你梳理下如何实现前端从你的Node.js后端获取数据并展示的完整方案，先看看现有代码里的问题，再给出优化后的实现：

一、后端代码优化 #

你的现有后端代码可以返回数据，但存在几个可以完善的点：错误处理缺失、变量命名不严谨、响应格式不够规范。

原后端代码 #

app.get('/chats',function(req,res){ 
  User.find({}).exec(function(err,user){ 
    res.send(user); 
  }); 
});

优化后的后端代码 #

// 采用async/await写法更简洁易读，同时增加错误处理
app.get('/chats', async function(req, res) {
  try {
    // User.find({})返回的是数组，变量名用users更合理
    const users = await User.find({});
    // 用res.json()返回标准JSON格式，比res.send()更适合API场景
    res.json(users);
  } catch (err) {
    // 捕获数据库查询错误，返回500状态码和错误信息
    res.status(500).json({ error: '获取数据失败', detail: err.message });
  }
});

注意：如果你的/chats接口本意是返回聊天记录而非用户数据，记得把User模型换成对应的Chat模型，保持接口路径和返回数据的逻辑统一。

二、前端代码修复与完善 #

你的前端代码存在重复引入jQuery的问题，而且缺少实际发起请求和渲染数据的逻辑，这里给出完整的修正版本：

修正后的前端代码 #

<html>
<head>
  <!-- 只保留一个jQuery版本，避免冲突 -->
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  <!-- 如果你不需要实时聊天功能，可以去掉socket.io的引入 -->
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <!-- 用来展示数据的容器 -->
  <div id="data-container"></div>

  <script>
    // 页面加载完成后发起AJAX请求
    $(document).ready(function() {
      $.ajax({
        url: '/chats', // 对应后端的接口路径
        method: 'GET',
        dataType: 'json',
        success: function(data) {
          const container = $('#data-container');
          // 处理空数据情况
          if (data.length === 0) {
            container.html('<p>暂无数据</p>');
            return;
          }
          // 遍历数据生成展示的HTML（根据你的User模型字段调整）
          let content = '<ul>';
          data.forEach(item => {
            content += `<li>用户ID：${item._id}，用户名：${item.username}</li>`;
          });
          content += '</ul>';
          container.html(content);
        },
        error: function(xhr, status, err) {
          // 请求失败时展示错误信息
          $('#data-container').html(`<p>数据加载失败：${err}</p>`);
        }
      });
    });
  </script>
</body>
</html>

三、额外注意事项 #

• 跨域问题：如果前端页面和后端服务不在同一个域名下，需要在后端配置CORS。可以安装cors中间件：

  npm install cors
  

  然后在后端代码中启用：

  const cors = require('cors');
  app.use(cors());
  

• 数据库连接：确保你的Node.js服务已经正确连接到MongoDB（因为使用了Mongoose的User.find()方法），否则会出现查询失败的错误。

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