以 HTML 表单发布 JSON 数据答案

【问题标题】：Post JSON data in a HTML form以 HTML 表单发布 JSON 数据
【发布时间】：2018-05-11 10:33:57
【问题描述】：

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

我使用模块 '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 确实有效，因为我能够从 url 中获取 fetch 数据并在前端显示。它的表单提交帖子不起作用。

谢谢

【问题讨论】：

标签： javascript forms reactjs express multipartform-data

【解决方案1】：

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' })} />
...

【讨论】：

【解决方案2】：

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

JSON.stringify(obj, replacer, space)

最好将数据保存在一个变量中，然后将其作为第一个参数传递给它。

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

【讨论】：

感谢您回来。我认为您对语法（es2015）感到困惑，我在 json.stringify 中传递了一个对象。我也试过你的方法，我在服务器上得到了同样的空 {}。最好的，
如果你传递的和上面的代码一样，那么你没有传递“collection & fieldSets”的值。尝试传递像 collection = someCollection & fieldSets = someSets 这样的值。然后它生成对象，然后只有它可以解析。
我强烈建议您在浏览器控制台中尝试上述代码样式。你会意识到它有效 :) 以上只是意味着： JSON.stringify({ collection : ...collection, fieldSets : ...fieldSets, responseType: 'csv' })