如何通过Ajax与Express.js将客户端字符串发送至服务器并存入MongoDB

我来帮你把这个完整流程跑通，从客户端代码优化到服务器端的存储和返回，一步步拆解给你：

一、完善客户端代码 #

你原来的代码已经在做复选框值的拼接了，但有几个小细节可以优化，让请求更规范、更易维护：比如去掉结果字符串末尾的多余空格，把数据包装成JSON对象发送（纯字符串会让服务器解析麻烦），同时补上错误处理逻辑。

完整的客户端代码如下：

$(document).ready(function() {
  $("#test").click(function() {
    // 获取所有选中的复选框元素
    var checkedBoxes = $('input[type="checkbox"]:checked');
    
    if (checkedBoxes.length > 0) {
      // 用map+join拼接选中值，自动避免末尾空格
      var resultString = checkedBoxes.map(function() {
        return $(this).val();
      }).get().join(" ");

      // 发送Ajax请求
      $.ajax({
        url: '/recipe',
        type: 'POST', // 提交数据用POST请求更符合REST规范
        contentType: 'application/json', // 告诉服务器我们发的是JSON格式
        data: JSON.stringify({ selectedValues: resultString }), // 把字符串包装成JSON对象
        dataType: 'json', // 期望服务器返回JSON格式的结果
        success: function(response) {
          console.log("数据存储成功！返回结果：", response);
          // 这里可以根据返回结果做页面提示，比如弹出成功信息
          alert(`提交成功！存储的ID是：${response.insertedId}`);
        },
        error: function(xhr, status, error) {
          console.error("请求出错了：", error);
          alert("提交失败，请稍后重试");
        }
      });
    } else {
      alert("请至少选中一个复选框哦");
    }
  });
});

二、Express服务器端实现 #

接下来要搭建服务器，完成接收请求→存入MongoDB→返回结果的流程，分三步走：

1. 先安装依赖包 #

打开终端，在你的项目目录下执行：

npm install express mongoose body-parser

2. 编写服务器核心代码 #

创建一个比如server.js的文件，写入以下代码：

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

const app = express();
const port = 3000;

// 配置body-parser，用来解析客户端发送的JSON数据
app.use(bodyParser.json());

// 连接本地MongoDB数据库
// 记得把yourDatabaseName改成你自己的数据库名称
mongoose.connect('mongodb://localhost:27017/yourDatabaseName', {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
.then(() => console.log("✅ MongoDB连接成功"))
.catch(err => console.error("❌ MongoDB连接失败：", err));

// 定义数据模型（Schema），用来指定存储的字段和规则
const RecipeSchema = new mongoose.Schema({
  selectedValues: {
    type: String,
    required: true // 这个字段是必填的
  },
  createdAt: {
    type: Date,
    default: Date.now // 自动填充当前时间
  }
});

// 创建对应的Model，操作数据库用
const Recipe = mongoose.model('Recipe', RecipeSchema);

// 处理/recipe路径的POST请求
app.post('/recipe', async (req, res) => {
  try {
    // 从请求体里拿到客户端发送的字符串
    const { selectedValues } = req.body;
    
    // 创建新的文档并保存到数据库
    const newRecipe = new Recipe({ selectedValues });
    const savedRecipe = await newRecipe.save();
    
    // 返回成功的响应，包含存储后的文档信息
    res.status(200).json({
      success: true,
      message: "数据已成功存入MongoDB",
      insertedId: savedRecipe._id,
      storedData: savedRecipe
    });
  } catch (err) {
    // 捕获错误，返回错误信息
    res.status(500).json({
      success: false,
      message: "存储数据失败",
      error: err.message
    });
  }
});

// 启动服务器
app.listen(port, () => {
  console.log(`🚀 服务器运行在 http://localhost:${port}`);
});

三、测试运行流程 #

1. 确保你的本地MongoDB服务已经启动；
2. 启动Express服务器：在终端执行node server.js；
3. 打开你的客户端页面，选中几个复选框，点击#test按钮，就能看到数据被存入MongoDB，同时页面会弹出成功提示，控制台也能看到返回的结果。

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