как взять информацию из html ввода и передать в nodeJS переменную - PullRequest
Новая
       53

как взять информацию из html ввода и передать в nodeJS переменную

0 голосов
/ 19 марта 2020

У меня есть один вопрос. У меня есть форма в index. html страница (см. Ниже). 

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

, а также сервер. 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. Например, если я напишу «Тест» и нажму кнопку «Отправить», должно отобразиться «[{« id »: 1,« firstName »:« Тест »}]

1 Ответ

0 голосов
/ 19 марта 2020

вы можете использовать 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>
...