当前位置： 文江博客话题详情

在提交表格时，如何使JavaScript（Node.js）等待？

发布于 2025-01-18 10:19:46 字数 9282 浏览 1 评论 0原文

我希望程序/脚本停止/等待“ 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:[email protected]/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>
原文

I would like the program/script to stop/wait after "console.log ('3')" until you click "Finished!" (and prior download of data from the above form).
Clicking this button would be equivalent to restarting the program / script from "console.log ('4')".
How can this be achieved?

code in 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:[email protected]/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);

code in 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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

江心雾 2025-01-25 10:19:46

我认为您需要了解客户端服务器的通信，服务器应准备好在客户端时处理请求，

您可以更新您的drideffromform函数以调用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');
}

和代码>主函数，您需要将客户端对象传递到reads fromform函数就像

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

I think you need to understand client-server communication, server should be ready to handle request whenever client made,

You may update your readingFromForm function to call createListing like

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');
}

and in the main function, you need to pass client object to readingFromForm function like

 // await readingFromForm();
 await readingFromForm(client);
回复 原文
浮萍、无处依 2025-01-25 10:19:46

在单击事件处理程序的表单上使用。仅在提交事件发生时才提交表格。

在形式标签中使用OnSubmit和JS中的活动处理程序。

use on click event handler in form. It will only submit the form when submit event will occur.

use onsubmit in form tag and an event handler in js.

回复 原文
~没有更多了~

关于作者

浅笑轻吟梦一曲

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文