Express：提交表单时返回 ?在网址中答案

【问题标题】：Express: When submitting the form returning a ? in the urlExpress：提交表单时返回 ?在网址中
【发布时间】：2021-10-04 18:32:01
【问题描述】：

提交返回“？”的表单时在网址中发布时会将我重定向到页面并在 URL 中返回 ?。

目录： server.js, index.html, package.json, package-lock, src/models/form.js``

server.js：

const express = require("express");
const app = express();
const router = express.Router();

app.use(express.urlencoded());
app.use(express.json());
app.use("/", express.Router());
app.use(express.static(__dirname + "/src"));

const mongoose = require("mongoose");

mongoose.connect(
  "",
  {
    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) {
    alert("Nice")
//   const model = new formModel({
//     name: req.body.name,
//     age: req.body.age,
//     gender: req.body.gender,
//   });
//   res.redirect('/');

//   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}`))

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>

    <h1>Type anything you want</h1>

    <form>
        <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>

            <script type="text/javascript">
        $(document).ready(function() {
            let username, age, gender;
            $("#former").submit(function() {
                username = $("#name").val();
                age = $("#age").val();
                gender = $("#gender").val();
                $.ajax({
                    url: '/login',
                    type: 'POST',
                    cache: false,
                    data: {
                        username: username,
                        age: age,
                        gender: gender
                    },
                    success: function(data) {
                        alert("Success!")
                    },
                    error: function(jqXHR, textStatus, err) {
                        alert('Text status: ' + textStatus + ', err ' + err)
                    }
                })
            })
        })
    </script>
</body>
</html>

它不会触发警报功能，当我将数据保存到 MongoDB 时，它甚至没有保存它只是在 URL 中返回一些 ?

【问题讨论】：

标签： javascript node.js mongodb express

【解决方案1】：

使用 javascript 提交表单时，您必须通过在事件上调用 preventDefault() 来防止表单的默认行为。

https://api.jquery.com/submit/

("#former").submit(function(event) {
  event.preventDefault()
  // your code
  ...
}

【讨论】：

还是什么都没做

【解决方案2】：

没关系！我只是没有在表单中添加属性 id，所以是的，这就是原因。

【讨论】：