Javascript 如何使用POST路由从表单检索数据？

我试图从引导表单元素中检索数据，并使用Express和Knex将其保存到PostgresSQL数据库。我运行路线时没有错误；但是，表单中的数据保存为null。这是我的表单元素（我正在使用React）：

以下是我的快速投递路线（此文件中包含app.use（bodyParser.json（））：

以下是Knex postNote的功能：

export function postNote(newNote) {
  const query = knex
    .insert({ note_content: newNote })
    .into('notes')

  return query
}

---

任何帮助都将不胜感激

对于POST请求，您可能需要等待数据体准备就绪。试试这个

app.post('/create-note', (req, res) => {
    var body = '';
    request.on('data',function(data) { body += data; });
    request.on('end', function(data) {
        postNote(body)
            .then(() => {
                res.sendStatus(201)
            })
    });
})

---

在标记中尝试以下操作，并放弃使用

fetch

...
<form method="POST" action="/create-note" enctype='application/json'>
    ...
</form>
...

你也可以试试

...
<button ref="form" onClick={this.handleClick} className="btn btn-primary" 
      type="submit">Submit</button>
...

---

我找到了一个解决方案，希望在其他人遇到类似问题时发布。问题是我没有正确查询textarea的值，所以我将一个未定义的变量传递给数据库保存。 以下是我提出的解决方案：

handleSubmit(e) {
  const data = new FormData(e.target)
  const text = {note: data.get('note')}
  fetch('/create-note', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(text)
  })
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <div className ="form-group">
        <label>Add a Note:</label>
        <textarea className="form-control" name="note" rows="5">
        </textarea>
        <button ref="textarea" className="btn btn-primary" 
        type="submit">Submit</button>
      </div>
    </form>
  )
}

handleSubmit（e）{
常量数据=新的FormData（例如目标）
const text={note:data.get（'note'）}
获取（“/create note”{
方法：“POST”，
标题：{'Content-Type'：'application/json'}，
正文：JSON.stringify（文本）
})
}
render（）{
返回(
添加注释：
提交
)
}

---

我在表单上放置了一个onSubmit事件侦听器，并使用表单创建了一个新的FormData实例。然后，我创建了一个对象，其中包含要传递到fetch调用的textarea的值

谢谢你的快速回复！我仍然得到相同的结果，表单中的数据仍然为空。感谢您的响应，但这也无法正常工作。hmmmm，您有任何其他调试信息吗？post route handler？req.body和req.body.note中的console.log（req.body）都是未定义的。当您尝试第一个解决方案时，是否删除了click handler？并添加了url编码的bodyparser中间件？你的源代码在github上吗？

...
<form method="POST" action="/create-note" enctype='application/json'>
    ...
</form>
...

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

...
<button ref="form" onClick={this.handleClick} className="btn btn-primary" 
      type="submit">Submit</button>
...

handleClick(e) {
  e.preventDefault();
  const data = new FormData(this.refs.form);

  fetch('/create-note', {
    method: 'POST',
    body: data
  })

}

handleSubmit(e) {
  const data = new FormData(e.target)
  const text = {note: data.get('note')}
  fetch('/create-note', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(text)
  })
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <div className ="form-group">
        <label>Add a Note:</label>
        <textarea className="form-control" name="note" rows="5">
        </textarea>
        <button ref="textarea" className="btn btn-primary" 
        type="submit">Submit</button>
      </div>
    </form>
  )
}