Post JSON 数据以 HTML 形式

Question

我在前端使用 React，在服务器端使用 expressJs。我有一些 javascript Object 数据要发送到服务器。我 JSON.stringify 数据，然后将其存储在 <textarea/> 表单中，然后我只是 post 它。

我正在使用模块 'body-parser' 进行一般 api 调用，并使用 'multer' 进行此多部分表单提交。

前端代码：

  <div>
    <form action="/api/query" method="POST">
    {/* following textarea value looks like this:
    {"collection":"Contract","fieldSets":[{"field":"location","value":"London","andOr":""}],"responseType":"csv"} */}
      <textarea defaultValue={JSON.stringify({ collection, fieldSets, responseType: 'csv' })} />
      <Button type="submit">Download</Button>
    </form>
  </div>

后端代码：

const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const upload = multer();
const app = express();
app.set('port', 1111);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// for parsing multipart/form-data
app.use(upload.array());
app.use(express.static('public'));

app.post('/query', (req, res) => {
   // here I keep getting reqbody as an empty {}
  console.log('reqbody is...', req.body);

但是，我一直在服务器上 req.body 内收到 {}。澄清一下，/api/query 确实有效，因为我能够 fetch 来自 url 的数据并显示在前端。它的表单提交 post 不起作用。

谢谢

Answer 1

JSON.stringify 只会将对象字符串化。在您的情况下，您似乎正在更换对象。你的语法看起来像

JSON.stringify(obj, replacer, space)

最好将您的数据保存在一个变量中，然后通过将其作为第一个参数传递给它来对其进行字符串化。

参考： https://www.w3schools.com/jsref/jsref_stringify.asp

Answer 2

HTML 表单输入字段应该有一个 name 属性才能被接受，否则它们在表单提交中会被忽略。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

以上工作有以下变化：

...
// added name attribute
<textarea name="reqData" defaultValue={JSON.stringify({ collection, fieldSets, responseType: 'csv' })} />
...

Post JSON 数据以 HTML 形式

Post JSON data in a HTML form

javascript

forms

multipartform-data

express

reactjs