Express提交表单后URL出现?且MongoDB无法保存数据问题求助

问题原因 #

前端问题 #

• 表单未设置对应ID：你的JS代码绑定了$("#former").submit提交事件，但HTML里的<form>标签根本没有添加id="former"属性，绑定的事件完全不生效，点击按钮时触发浏览器默认的GET表单提交行为，所以URL末尾会出现?，页面直接跳转刷新，绑定的AJAX和alert都不会执行。
• 未阻止默认提交行为：就算事件绑定成功，没有加阻止默认提交的逻辑，浏览器还是会触发原生表单提交导致页面跳转。
• 前后端字段不统一：AJAX提交的字段名是username，但后端接口取值用的是req.body.name，字段对应不上，就算请求发成功也取不到正确的参数。

后端问题 #

• Node环境调用浏览器API：server.js的/login接口里写了alert("Nice")，alert是浏览器专属API，Node.js运行环境没有这个方法，接口一调用就直接报错，后续存储逻辑完全不会执行。
• 未导入数据库模型：你定义了src/models/form.js的MongoDB模型，但server.js里没有导入formModel，调用的时候会直接报引用错误。
• MongoDB连接串为空：mongoose.connect的第一个参数是空字符串，根本无法连接到MongoDB数据库，存储操作自然失败。
• 无用代码干扰：app.use("/", express.Router())和声明后未使用的router变量属于无效代码，可能干扰路由匹配。
• 响应逻辑错误：注释掉的代码里把res.redirect('/')写在了model.save()前面，还没执行存储就直接返回重定向，也不符合AJAX接口的响应要求。

解决方案 #

1. 调整HTML代码 #

给form标签添加对应ID，修改后如下：

<form id="former">
    <label for="name">Username</label>
    <input type="text" id="name">
    <label for="age">Age</label>
    <input type="number" id="age">
    <label for="gender">Gender</label>
    <input type="text" id="gender">
    <button class="btn btn-dark" id="submit">Submit</button>
</form>

2. 调整前端JS逻辑 #

添加阻止默认提交的逻辑，统一提交字段名：

$(document).ready(function() {
    let username, age, gender;
    $("#former").submit(function(e) {
        // 阻止浏览器默认表单提交行为
        e.preventDefault();
        username = $("#name").val();
        age = $("#age").val();
        gender = $("#gender").val();
        $.ajax({
            url: '/login',
            type: 'POST',
            cache: false,
            data: {
                // 字段名和后端取值保持一致
                name: username,
                age: age,
                gender: gender
            },
            success: function(data) {
                alert("Success!")
            },
            error: function(jqXHR, textStatus, err) {
                alert('Text status: ' + textStatus + ', err ' + err)
            }
        })
    })
})

3. 调整server.js代码 #

const express = require("express");
const app = express();
const mongoose = require("mongoose");
// 导入自己定义的MongoDB模型，注意路径和导出名要对应
const formModel = require('./src/models/form.js');

// 消除urlencoded警告
app.use(express.urlencoded({extended: true}));
app.use(express.json());
app.use(express.static(__dirname + "/src"));

// 替换为你自己的MongoDB连接串，本地测试默认是mongodb://localhost:27017/你的数据库名
mongoose.connect(
  "mongodb://localhost:27017/test_db",
  {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  }
);
const db = mongoose.connection;
db.once("open", function () {
  console.log("Connected To MongoDB!");
});
db.on("error", console.error.bind(console, "Connection Error: "));

const PORT = process.env.PORT || 4000;

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html')
});

app.post("/login", async function (req, res) {
    // 删掉node环境不支持的alert
    const model = new formModel({
        name: req.body.name,
        age: req.body.age,
        gender: req.body.gender,
    });

    try {
        await model.save();
        res.send(model);
    } catch (err) {
        res.status(500).send(err);
    }
});

app.get("/users", async (request, response) => {
  const users = await formModel.find({});

  try {
    response.send(users);
  } catch (error) {
    response.status(500).send(error);
  }
});

app.listen(PORT, () => console.log(`Running on ${PORT}`))

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