Question

我创建了一个表单应用程序，用于使用NodeJS，express和EJS模板引擎从MongoDB服务器插入和选择数据。当我单击提交按钮以插入数据或将数据显示到HTML表中时，我的网页将刷新；因此，这是我的表单应用程序的问题，我不知道如何解决，因此通过解决此问题，您将为我带来很大的帮助，非常感谢。

registration.ejs

    <%- include('../includes/head.ejs')%>
    <link rel="stylesheet" href="/css/forms.css">
</head>
<body>
    <%- include('../includes/header.ejs')%>
    <main class="content">
        <form class="product-form" action="/" method="post">
            <div class="form-control">
                <label for="fullname">Full Name</label>
                <input type="text" name="fullname" id="fullname">
            </div>
            <div class="form-control">
                <label for="major">Major</label>
                <input type="text" name="major" id="major">
            </div>
            <div class="form-control">
                <label for="email">Email</label>
                <input type="email" name="email" id="email">
            </div>
            <button class="btn" type="button" onclick="postData(this)">Submit</button>
        </form>
<br><hr><br><br>
        <table border="2"> 
            <thead>
                <tr>
                    <th>Number</th>
                    <th>Full-Name</th>
                    <th>Major</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <%
                if(students.length>0){
                    let i=0;
                    for(s of students){
                        i++
                        %>
                        <tr>
                            <th><%= i %></th>
                            <th><%= s.fullname %></th>
                            <th><%= s.major %></th>
                            <th><%= s.email %></th>
                        </tr>
                        <%
                    }
                }
                %>

            </tbody>
        </table>
    </main>
    <script src="/js/data.js"></script>
    <%- include('../includes/end.ejs')%>

data.js

postData = (data) => {
    const fullname = document.getElementById('fullname').value;
    const major = document.getElementById('major').value;
    const email = document.getElementById('email').value;


    let url = "http://localhost:3000/";
      let method = 'POST'

    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            fullname: fullname,
            major: major,
            email: email
        })
    })
    .then(res => {
        if (res.status !== 200 && res.status !== 201) {
          throw new Error('Creating or editing a post failed!');
        }
        return res.json();
      })
    .then(data => {
        console.log(data)
    })
      .catch(err => {
        console.log(err);
        this.setState({
          isEditing: false,
          editPost: null,
          editLoading: false,
          error: err
        });
      });
}

Students.js模型

const Mongoose = require('mongoose');

const Schema = Mongoose.Schema;

const studentSchema = new Schema({
    fullname: String,
    email: String,
    major: String
})

module.exports = Mongoose.model("Student", studentSchema)

register.js控制器

const Students = require('../Models/Students');

exports.getAddStudent = (req, res) => {
      Students.find()
      .then((students)=>{
        res.render('./registration/registration.ejs',{
            pagetitle:"Student Registration",
            path:"/form",
            students:students
        });
      }).catch(err=>console.log(err))    
}

exports.postAddStudent = (req, res) => {
        const fullname= req.body.fullname;
        const email= req.body.email;
        const major= req.body.major;

        const students = new Students({
            fullname: fullname,
            email: email,
            major: major
        });
        students
          .save()
          .then(result => {
            res.status(201).json({
              message: 'Post created successfully!',
              post: result
            });
          })
          .catch(err => {
            if (!err.statusCode) {
              err.statusCode = 500;
            }
            next(err);
          });
}

register.js路由器

const express = require("express");
const router = express();
const registrationController = require('../controllers/register');

router.get('/',registrationController.getAddStudent);
router.post('/',registrationController.postAddStudent);

module.exports = router;

app.js

const express = require("express");
const app = express();
const path = require("path")
const body_parser = require('body-parser');
app.use(body_parser.json())
const ejs=require('ejs');
const registration = require("./routes/register");
const connection = require('mongoose');

app.use(body_parser.urlencoded({extended: false}));
app.use(express.static(path.join(__dirname,'public')));
app.set('view engine','ejs')

app.use(registration);

connection.connect('mongodb://localhost:27017/StudentsRegistration')
.then(()=>{
    app.listen(3000); 
})
.catch(err => console.log);

如何在不重新加载/刷新网页的情况下将数据插入MongoDB服务器并显示在html表上

0 个答案: