如何在没有Express的情况下从表单字段中获取数据?

时间:2017-08-07 12:26:29

标签: node.js forms

我正在尝试从POST请求中的表单字段中获取数据。我的问题是,当我使用浏览器时,我得到的应该包含数据的对象是空的,但是如果我使用Postman,它就可以工作。

我正在使用formidable模块从表单中获取数据。

这是我的表格:

<div class="form">
  <form action="/signup" method="POST">
    <div class="form-group">
      <label for="username">Username:</label>
      <input type="text" class="form-control" id="username" placeholder="Username">
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Email">
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-default" id="signup-btn">Sign Up</button>
  </form>
</div>

以下是表格的路线:

signupPost: function (request) {
  route.post('/signup', function () {
    var form = new formidable.IncomingForm();

    form.parse(request, function (error, fields, files) {
      if (error) {
        console.error(error);
      }
      console.log(request.headers);
      console.log(fields);
    });
  });
}

route.post函数是在不同模块中声明的自定义函数:

post: function (url, handler) {
  if (this.request.method === 'POST' && this.request.url === url) {
    var data = handler();
    this.response.end(data);
  }
}

我尝试更改标题,以便post函数看起来像这样,但它不起作用:

post: function (url, handler) {
  if (this.request.method === 'POST' && this.request.url === url) {
    this.response.writeHead(200, {
      'content-type': 'multipart/form-data'
    });
    var data = handler();
    this.response.end(data);
  }
}

包含它有帮助,这是我从浏览器返回的标题:

{ host: 'localhost:8080',
  connection: 'keep-alive',
  'content-length': '0',
  'cache-control': 'max-age=0',
  origin: 'http://localhost:8080',
  'upgrade-insecure-requests': '1',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36',
  'content-type': 'application/x-www-form-urlencoded',
  accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
  referer: 'http://localhost:8080/signup',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-US,en;q=0.8' }

以下是Postman的内容:

{ 'cache-control': 'no-cache',
  'postman-token': '72c9c23c-dc66-400e-85cb-615a633efd02',
  'content-type': 'multipart/form-data; boundary=--------------------------641553275315430252355922',
  'user-agent': 'PostmanRuntime/6.2.5',
  accept: '*/*',
  host: 'localhost:8080',
  'accept-encoding': 'gzip, deflate',
  'content-length': '409',
  connection: 'keep-alive' }

如果有人想要查看整个项目,我有项目on GitHub

2 个答案:

答案 0 :(得分:0)

您不需要任何其他库,例如var qs = require('querystring'); function parseBody(req, callback) { var body = ''; req.on('data', (data) => body += data); req.on('end', () => callback(qs.parse(body))) } ... post: function (url, handler) { if (this.request.method === 'POST' && this.request.url === url) { parseBody (this.request, function (data) { console.log(data); }) } } 代表&#34;简单&#34;字段:

{{1}}

答案 1 :(得分:0)

只有具有name属性的表单元素才会在提交表单时传递其值。所以你不是从浏览器发布任何东西。 https://www.w3schools.com/tags/att_input_name.asp

只需在输入中添加名称属性即可解决问题。例如:

<input type="text" class="form-control" name="username" id="username" placeholder="Username">