如何从 html 输入中获取信息并传递给 nodeJS 变量

Question

我有一个问题。我在 index.html 页面中有表格（见下文）。

<form action="/" method="post">
<input type="text" name="name" placeholder="customer name"/>   
<button type="submit" name="submit">Submit</button>
</form>

并且还有 server.js 包含代码的页面，如下所示

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

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));


app.get("/", function(req, res) {
res.sendFile(__dirname + "/index.html");
});

app.get("/api/customers", (req, res) => {
var name = req.body.name;
const customers = [
{ id: 1, firstName:name}
];
res.json(customers);
});

const port = 5000;
app.listen(port, () => console.log(`server  ${port}`));

现在我的问题是：当我在输入中写一些东西时，我想获取该文本并将其传递到我的 nodeJS 中。例如，如果我写 "Test" 并按 "Submit" 按钮，它应该显示“[{"id":1,"firstName":"Test"}]

Answer 1

您可以使用 fetch 发出请求然后得到响应，

handleInputChange = (e) => {
  this.setState({
    name : e.target.value
  })
}

handleSubmit = (e) => {
    e.preventDefault();
    const data = { name : this.state.name };
    fetch('/api/customers', {
      method: 'GET', // *GET, POST, PUT, DELETE, etc.
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data) // body data type must match "Content-Type" header
    })
    .then((response) => response.json())
    .then((result) => {
      this.setState({ customers : result}, () => {
        console.log('Success:', result);
      });
    })
    .catch((error) => {
      console.error('Error:', error);
    });
}

您可以在表格中使用 handleInputChange 和 handleSubmit，

<form onSubmit={this.handleSubmit}  id="form">
  <input type="text" name="name" onChange={this.handleInputChange} placeholder="customer name"/>   
  <button type="submit" name="submit">Submit</button>
  <div id="result">{this.state.customers && this.state.customers.map(cust => {
    return (
      <span key={cust.id}>{cust.name}</span>
    )
  })}</div>
</form>

如何从 html 输入中获取信息并传递给 nodeJS 变量

how to take information from html input and pass into nodeJS variable

node.js

express

body-parser