如何在沒有Express的情況下從表單字段獲取數據？

Question

我想從POST請求中的表單域中獲取數據。我的問題是，我得到的那個對象應該包含數據，當我使用瀏覽器時是空的，但是如果我使用郵遞員，它是有效的。

我正在使用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' } 

這裏是那些從郵差：

{ '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如果有人想看到整個項目。

Answer 1

只有形成一個name屬性的元素會提交一個表單時，通過它們的值。所以你不會在瀏覽器中發佈任何內容。 https://www.w3schools.com/tags/att_input_name.asp

只需在輸入中添加名稱屬性即可解決問題。例如：

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

Answer 2

您不需要任何額外的庫例如formidable爲「簡單」字段：

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); 
     }) 
    } 
}