2014-08-29 24 views
1

所以我有一個簡單的JavaScript的前端:FORMDATA張貼到快速4.0 - 身體分析器不工作

var xhr = new XMLHttpRequest(); 
var data = new FormData(); 
data.append('param1', 'value1'); 
data.append('param2', 'value2'); 
xhr.open('POST', '/query'); 
xhr.onload = function(data){ 
    console.log('loaded', this.responseText); 
}; 
xhr.send(data); 

,並在節點側:

var express = require('express'); 
var app = express(); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded()); 

app.post('/query', function(req, res){ 
    console.log(req.body); 
    res.send('ok'); 
}); 

當我運行它,控制檯記錄一個空對象{}

如果我嘗試使用適當的形式,如:

<form method="POST" action="/query"> 
    <input type="text" name="param1" value="value1"> 
    <input type="text" name="param2" value="value2"> 
    <button type="submit">Submit</button> 
</form> 

一切按預期和控制檯日誌:

{ param1: 'value1', param2: 'value2' } 

我在做什麼錯?

回答

1

因爲FormData對象總是作爲XHR的multipart/formdata發送。 https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#dom-xmlhttprequest-send

您可以通過multer解析FormData。 如果不發送任何二進制文件,或者以字符串形式(json或查詢字符串)而不是FormData發送。

以下代碼發送json字符串,服務器可以解析數據。

var xhr = new XMLHttpRequest(); 
var data = { 
    param1: 'value1', 
    param2: 'value2' 
}; 
xhr.open('POST', '/query'); 
xhr.onload = function(data) { 
    console.log('loaded', this.responseText); 
}; 
xhr.setRequestHeader('Content-Type', 'application/json'); 
xhr.send(JSON.stringify(data));