javascript 快速 NodeJS ：在POST中将文本/元素附加到HTML文件

bvjxkvbb 于 2022-12-21 发布在 Java

关注(0)|答案(1)|浏览(102)

我正在尝试使用Express制作一个基本的登录系统，如果用户的用户名和密码根据MySQL数据库是正确的，那么当它收到POST请求时，它会在页面底部添加一个简短的"成功!"或"失败"消息。
我试过使用res.write("Success!")和res.send("Success!")，但都不起作用--相反，它们只是创建了一个带有"Success!"的新页面。
超文本：

<html>
    <head>
        <meta charset="utf-8">
        <title>Login</title>
    </head>
    <body>
        <h1>Login</h1>
        <form id="contact-form" method="POST" action="/login">
            <label for="Username">Username: </label>
            <input name="Username" maxlength="45"><br><br>

            <label for="Password">Password: </label>
            <input name="Password" type="password" maxlength="45"><br><br>

            <input type="submit" value="Submit">
        </form>
    </body>
</html>

联森：

const port = 3000;

const express = require("express");
const mysql = require("mysql2");
const app = express();
const bodyParser = require("body-parser");

var conn = mysql.createConnection({
    host: "localhost",
    database: "database",
    user: "<Username>",
    password: "<Password>"
});

conn.connect((err) => {
    if(err) throw err;
    console.log("Connected to database.");
})

app.use(express.static(__dirname + "/public"));

app.use(bodyParser.urlencoded({
    extended: false
}));

app.get("/login", (req, res) => {
    res.sendFile(__dirname + "/Login.html");
});

app.post("/login", (req,res) => {
    let form = req.body;
    let sqlQuery = "SELECT * FROM logins WHERE Username = '" + form.Username + "' AND Password = '" + form.Password + "';";
    conn.query(sqlQuery, (err, result, fields) => {
        if(err) throw err;
        if(result.length == 1) {
            res.write("<p>Success!</p>")
        } else {
            res.write("<p>Failure.</p>")
        }
    })
});

app.listen(port);

那么，我如何在HTML文件的底部附加一个短的 * p * 元素/文本呢？

JavaScript

来源：https://stackoverflow.com/questions/74857347/express-nodejs-append-text-p-element-to-a-html-file-in-post

1条答案

按热度按时间

58wvjzkj1#

好的，当登录表单中的提交按钮被点击时，它会创建一个全新的请求，而旧页面不再处于请求的上下文中。
因此，res.write（）创建了一个新页面，因为生成了一个新请求。
如果您想在同一个页面上附加失败和成功消息，您可以使用 AJAX 请求来代替默认表单提交。
发送 AJAX 请求，您将在没有页面重载的情况下收到响应，然后在收到响应时，使用javascript，您可以从服务器附加一个带有消息的新元素

const contactForm = document.getElementById('contact-form');
contactForm.addEventListener('submit',(e)=>{
    e.preventDefault();
    const username = contactForm.elements['username'].value;
    const password = contactForm.elements['password'].value;

    // now make the ajax call, you can use any library like FetchAPI, axios or even jQuery Ajax
    fetch('http://backend/endpoint',{
            method: 'POST',
            body: JSON.stringify({username,password})
        })
        .then((res)=>{
            return res.json();
        })
        .then((data)=>{
            console.log(data)
            // you can append new element here
            // based on data (success or failure)
        })
})

赞(0）回复(0）举报 2022-12-21

我来回答

javascript 快速 NodeJS ：在< p>POST中将文本/元素附加到HTML文件

1条答案

相关问题

热门标签

最新问答