如何解决从HTML调用JavaScript函数时无法连接MongoDB的问题

你遇到的核心问题是浏览器环境无法执行Node.js特有的MongoDB操作代码，下面具体拆解原因和解决办法：

问题根源 #

你在index.html的function2()里直接调用了function3()，但function3()里用到了var MongoClient = require('mongodb').MongoClient;——require是Node.js专属的模块加载方法，浏览器根本没有这个API！

当浏览器执行到这一行代码时会直接报错，导致后续的MongoDB连接、查询、更新逻辑全部无法运行，这就是为什么你的数据库操作没反应的原因。

另外还有个隐藏的安全风险：就算能在前端运行，直接把MongoDB连接字符串暴露给浏览器，等于把数据库的大门敞开给所有人，恶意用户很容易篡改或删除你的数据。

正确的解决方案：后端处理数据库操作 #

标准的Web开发流程里，数据库操作必须放在后端服务中，前端通过AJAX/HTTP请求调用后端接口来间接完成数据库操作。具体步骤如下：

1. 把function3()的逻辑移到后端接口 #

假设你的后端用Express框架（从你的API地址看应该是Node.js服务），在你的后端文件（比如index2.js）里添加一个处理数据库更新的接口：

const express = require('express');
const MongoClient = require('mongodb').MongoClient;
const app = express();
const mongoUrl = "你的MongoDB连接字符串"; // 替换成你原来的数据库连接地址

// 新增接口：处理数据库计数与更新
app.get('/api/update-hiscount', (req, res) => {
  MongoClient.connect(mongoUrl, function(err, db) {
    if (err) {
      console.error('数据库连接失败:', err);
      return res.status(500).send('数据库连接出错');
    }

    const dbo = db.db("mkndb");
    const query = { time2: "2018-03-12" };

    // 查询计数
    dbo.collection("Albaha").find(query).count(function(err, result) {
      if (err) {
        console.error('查询计数失败:', err);
        db.close();
        return res.status(500).send('查询计数出错');
      }
      console.log("count:", result);

      // 更新Test集合
      const myquery = { rid: "1" };
      const newvalues = { $set: { Hiscount: result } };
      dbo.collection("Test").updateOne(myquery, newvalues, function(err, updateRes) {
        if (err) {
          console.error('更新文档失败:', err);
          db.close();
          return res.status(500).send('更新文档出错');
        }

        console.log("1 document updated");
        db.close();
        res.send({ success: true, message: '计数更新成功' });
      });
    });
  });
});

// 保留你原来处理城市数据的接口
// ...（这里放置你原来的/api/:city相关代码）

app.listen(8082, () => {
  console.log('服务器运行在8082端口');
});

2. 修改前端function2()，调用后端接口 #

把原来直接调用function3()的代码，改成用AJAX请求上面新增的后端接口：

function function2() {
  // 调用后端数据库操作接口
  $.ajax({
    url: "https://*****-******.c9users.io:8082/api/update-hiscount",
    headers: {
      "Cache-Control": "no-cache"
    }
  }).done(function(response) {
    console.log(response.message); // 打印成功提示
  }).fail(function(err) {
    console.error('数据库操作失败:', err); // 捕获错误便于调试
  });

  alert("Back");
  // 保留你原来的Riyadh数据请求逻辑
  $.ajax({
    url: "https://*****-******.c9users.io:8082/api/" + "Riyadh",
    headers: {
      "Cache-Control": "no-cache"
    }
  }).done(function(response) {
    const obj = {
      "city_name": 'Riyadh',
      "tweets": response
    };
    responseArr.push({ city_name: "Riyadh", tweets: response });
  });
}

额外提示 #

• 永远不要在前端代码里暴露数据库连接字符串、密钥等敏感信息，所有涉及数据读写的操作都交给后端处理。
• 后端接口要做好错误处理（比如上面代码里的status(500)），这样前端能快速定位问题，方便调试。

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