简体   繁体   English

Node.js express:试图从 HTML 表单中获取文本,req.body 为空

[英]Node.js express: trying to get text from HTML form, req.body empty

I'm trying to build a basic text to speech form, but I cannot grab the text from the form.我正在尝试构建一个基本的文本到语音表单,但我无法从表单中获取文本。 I'm trying to get text from an HTML form using an express server and req.body turns up empty every time.我正在尝试使用快速服务器从 HTML 表单中获取文本,并且 req.body 每次都变为空。 I've tried using body-parser and changing the enctype on the form, nothing seems to work.我尝试使用 body-parser 并更改表单上的 enctype,但似乎没有任何效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>index.html</title>
  </head>
  <body>

    <h1>Speech!!</h1>
    <main>
        <form action="/speak" method="POST" id="speak-form" enctype="multipart/form-data">
            <div id="text-container">
                <label for="text-box">Text to Speech!</label>
                <input type="text" id="text-box" title="text" placeholder="Type what you want to say here!"/>
            </div>
            <div class="button-container">
                <button type="submit" id="submit-button">Speak!</button>
            </div>
            <div class="button-container">
                <button type="reset" id="clear-form">Clear Text</button>
            </div>
        </form>
    </main>
  </body>
</html>

app.js应用程序.js

    const express = require("express");
    const bodyParser = require('body-parser');
    const app = express();
    const configRoutes = require("./routes");

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

    configRoutes(app);

    app.listen(3000, () => {
      console.log("Speech Server");
    });

index.js index.js

const express = require("express");
const speakRoutes = require("./speak");

const constructorMethod = (app) => {
    app.use("/speak",speakRoutes);

    app.use("*", (req,res) => {
        res.sendFile("index.html", { root: "./public" });
    });
};

module.exports = constructorMethod; 

speak.js说话.js

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

router.post("/", async (req,res) => {
    console.log("POST");
    console.log(req.body);
    res.sendFile("index.html", { root: "./public" });
});

module.exports = router;

I would greatly appreciate some help!我将不胜感激一些帮助! Thank you!谢谢!

Your input has no name, give your input a name so you know what property to look for in the form:您的输入没有名称,请为您的输入命名,以便您知道要在表单中查找的属性:

<input type="text" id="text-box" name="whatever" ... />

EDIT: A client-only example.编辑:仅限客户端的示例。 One field has a name.一个字段有一个名称。

 $('form').on('submit', function(e) { e.preventDefault(); console.log($(e.currentTarget).serialize()); });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Speech!!</h1> <main> <form action="/speak" method="POST" id="speak-form" enctype="multipart/form-data"> <div id="text-container"> <label for="text-box">Text to Speech!</label> <input type="text" id="text-box" title="text" placeholder="Type what you want to say here!" name="whatever" /> <input type="text" id="text-box" title="text" placeholder="I have no name so I won't be sent!" /> </div> <div class="button-container"> <button type="submit" id="submit-button">Speak!</button> </div> <div class="button-container"> <button type="reset" id="clear-form">Clear Text</button> </div> </form> </main>

I fixed my own issue!我解决了我自己的问题! It worked by changing post to get in the route and the html form method, and req.body to req.query它通过更改post get路线和 html 表单方法和req.bodyreq.query来工作

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM