如何让 Javascript (node.js) 在我提交表单时等待？

Question

我想要 program/script 到 stop/wait 在“console.log ('3')”之后，直到您点击“完成！” （以及事先从上述表格下载数据）。单击此按钮相当于从“console.log ('4')”重新启动程序/脚本。如何实现？

app.js中的代码：

var express = require('express');
var http = require('http');
var path = require("path");
var helmet = require('helmet');
var rateLimit = require("express-rate-limit");
const port = process.env.PORT || 3000;
const { MongoClient, ServerApiVersion } = require('mongodb');
const { body, validationResult } = require('express-validator');
const { title } = require('process');
 
const app = express(),
    { engine } = require('express-handlebars'),
    bodyParser = require('body-parser');
 
app.set('view engine', 'hbs');
 
app.use(express.static("public"));
 
app.use(express.json({ extended: false }));
 
//app.use(bodyParser({ extended: false }))
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.engine('handlebars', engine({
    defaultLayout: 'main'
}))
app.set('view engine', 'handlebars')
 
async function readingFromForm() {
    console.log('data download has started');
    console.log('3');
    app.post('/added', function(sReq, sRes) {
        var newTitle = sReq.body.title;
        console.log('title:', newTitle);
 
        var newAuthor = sReq.body.author;
        console.log('author:', newAuthor);
 
        var newMood = sReq.body.mood;
        console.log('mood:', newMood);
 
        var newTime = sReq.body.time;
        console.log('time:', newTime);
 
        var newDate = sReq.body.date;
        console.log('date:', newDate);
 
        sRes.sendStatus(200);
 
        console.log(sReq); //Caution! It generates a lot of "spam" in the console !!!
        console.log(sRes); //Caution! It generates a lot of "spam" in the console !!!
 
    });
    console.log('4');
    console.log('data has been downloaded');
}
 
async function main() {
 
    const uri = "mongodb+srv://rafal:rafal@cluster0.gsf4h.mongodb.net/cattu?retryWrites=true&w=majority";
 
    const client = new MongoClient(uri);
 
    try {
        console.log('START');
        console.log('1');
        await client.connect(); // Connect to the MongoDB cluster
 
        console.log('2');
        await readingFromForm();
 
        console.log('5');
        await createListing(client, {
            title: "newTitle",
            author: "newAuthor",
            mood: "newMood",
            time: "newTime",
            date: "newDate" // YYYY-MM-DD
        })
        console.log('END');
 
    } catch (e) {
        console.error(e);
    } finally {
 
        await client.close();
    }
}
main().catch(console.error);
async function createListing(client, newListing) {
 
    const result = await client.db("cattu").collection("test1").insertOne(newListing);
    console.log(`New listing created with the following id: ${result.insertedId}`);
}
 
app.listen(port);

代码在 public/index.html

<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Cattu</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" type="image/x-icon" href="favicon.png">
</head>
 
<body>
 
    <ul>
        <li><a href="#home">Start</a></li>
        <li><a href="#form">Formularz</a></li>
    </ul>
 
    <div id="poraDnia">
        <div id="bgchange">
 
 
            <div class="main">
 
                <form method="POST" action="/added">
 
                    Podaj tytuł piosenki<br>
                    <input type="text" id="tytul" name="title" size="20px" required><br><br> Podaj wykonawcę<br>
                    <input type="text" id="wykonawca" name="author" size="20px" required><br><br> W jakim Jesteś nastroju?
                    <br>
                    <input type="checkbox" id="wesoly" value="wesoly" name="mood">
                    <label for="wesoly"> Wesoły/a </label><br>
 
                    <input type="checkbox" id="smutny" value="smutny" name="mood">
                    <label for="smutny"> Smutny/a </label><br>
 
                    <input type="checkbox" id="znudzony" value="znudzony" name="mood">
                    <label for="znudzony"> Znudzony/a </label><br>
 
                    <input type="checkbox" id="zmeczony" value="zmeczony" name="mood">
                    <label for="zmeczony"> Zmęczony/a </label><br>
 
                    <input type="checkbox" id="zdenerwowany" value="zdenerwowany" name="mood">
                    <label for="zdenerwowany"> Zdenerwowany/a </label><br>
 
                    <input type="checkbox" id="radosny" value="radosny" name="mood">
                    <label for="radosny"> Radosny/a </label><br>
 
                    <input type="checkbox" id="neutralny" value="neutralny" name="mood">
                    <label for="neutralny"> Neutralny/a </label><br>
 
                    <br>
 
                    <label for="pora"> Podaj porę dnia </label><br>
                    <select name="time" id="pora" required>
                        <option value="rano">Rano</option>
                        <option value="poludnie">Południe</option>
                        <option value="wieczor">Wieczór</option>
                        <option value="noc">Noc</option>
                        <option value="nie_pam">Nie pamiętam</option>
                    </select><br><br>
 
                    <label for="pora"> Podaj datę </label><br>
                    <input name="date" type="date"><br><br>
 
 
                    <button type="submit" class="submit">Skończone!</button>
                    <button type="reset" class="submit">Resetuj!</button>
 
                </form>
 
            </div>
 
            <div class="content">
 
                <div id="tlo3" onmouseover="rotatemoon(this)" onmouseout="rotatemoonB(this)">
                    <div id="obiekt_glowny3" onmouseover="movein(this)" onmouseout="moveout(this)">
                        <div id="ksiezyc_srodek"></div>
                    </div>
                </div>
                <div id="tloGwiazdy1">
                    <div id="gwiazda1"></div>
                    <div id="gwiazda2"></div>
                    <div id="gwiazda3"></div>
                </div>
                <div id="tloGwiazdy2">
                    <div id="gwiazda11"></div>
                    <div id="gwiazda12"></div>
                    <div id="gwiazda13"></div>
                </div>
 
 
                <div id="tlo2">
                    <div id="obiekt_glowny2" onmouseover="bigSun(this)" onmouseout="smolSun(this)">
                        <div id="promien1"></div>
                        <div id="promien2"></div>
                        <div id="promien3"></div>
                        <div id="promien4"></div>
                        <div id="promien5"></div>
                        <div id="promien6"></div>
                        <div id="promien7"></div>
                        <div id="promien8"></div>
                        <div id="promien9"></div>
                        <div id="promien0"></div>
                    </div>
                </div>
 
                <div id="tlo1">
                    <div id="obiekt_glowny1">
                        <div id="slonce" onmouseover="blouClounds(this)" onmouseout="whiteClounds(this)">
                            <div id="promien11"></div>
                            <div id="promien12"></div>
                            <div id="promien13"></div>
                            <div id="promien14"></div>
                        </div>
                    </div>
                    <div id="chmura1"></div>
                    <div id="chmura2"></div>
                </div>
 
            </div>
 
            <div class="info1">
 
                <a href=""><br><br><br><br><br><br><br><br><br>Zobacz pełną historię</a>
            </div>
            <div class="info2">
 
                <!-- Tutaj chcemy pobierać dane z bazy żeby móc je wyświetlić (pobierać może zewnętrzny skrypt) -->
                *Dane pobrane z bazy*
 
            </div>
 
        </div>
    </div>
 
    <script src="script1.js"></script>
 
</body>
 
</html>

Answer 1

在表单中使用单击事件处理程序。它只会在提交事件发生时提交表单。

在表单标签中使用 onsubmit 并在 js 中使用事件处理程序。

Answer 2

我认为你需要了解client-server通信，服务器应该准备好在客户端发出请求时处理，

您可以更新您的 readingFromForm 函数来调用 createListing 就像

async function readingFromForm(client) {
    console.log('data download has started');
    console.log('3');
    app.post('/added', async function(sReq, sRes) {
        var bodyData = sReq.body;
        await createListing(client, bodyData);
        sRes.sendStatus(200);
        // sReq is an request object contains all request related information(data, objects & functions)
        // sRes is an response object contains all response related information(data, objects & functions)
 
    });
    console.log('4');
    console.log('data has been downloaded');
}

并且在 main 函数中，您需要将 client 对象传递给 readingFromForm 函数，例如

 // await readingFromForm();
 await readingFromForm(client);

如何让 Javascript (node.js) 在我提交表单时等待？

How do I make Javascript (node.js) wait while I submit the form?

javascript

forms

wait

node.js