如何使用POST路徑從表單中檢索數據？

我試圖從Bootstrap表單元素中檢索數據，並使用Express和Knex將其保存到PostgresSQL數據庫中。我運行路線時沒有錯誤;但是，表單中的數據保存爲空。這裏是我的表單元素（我使用的反應）：如何使用POST路徑從表單中檢索數據？

render() { 
    return (
    <form> 
     <div className ="form-group"> 
     <label>Add a Note:</label> 
     <textarea className="form-control" name="note" rows="5"> 
     </textarea> 
     </div> 
     <button onClick={this.handleClick} className="btn btn-primary" 
     type="submit">Submit</button> 
    </form> 
) 
}

這是我取的POST路線：

handleClick(e) { 
    e.preventDefault() 
    fetch('/create-note', { 
    method: 'POST' 
    }) 
}

這裏是我的郵政快遞航線（app.use（bodyParser.json （））被包括在該文件中）：

app.post('/create-note', (req, res) => { 
    postNote(req.body.note) 
    .then(() => { 
     res.sendStatus(201) 
    }) 
})

這裏是Knex postNote功能：

export function postNote(newNote) { 
    const query = knex 
    .insert({ note_content: newNote }) 
    .into('notes') 

    return query 
}

任何幫助，將不勝感激！

來源

2017-08-02 Nic Bonetto

沿着我找到了解決方案，並希望將它張貼櫃面別人運行到類似的問題。問題是我沒有正確查詢textarea的值，所以我將一個未定義的變量傳遞給數據庫來保存。這是我想出瞭解決方案：

handleSubmit(e) { 
    const data = new FormData(e.target) 
    const text = {note: data.get('note')} 
    fetch('/create-note', { 
    method: 'POST', 
    headers: { 'Content-Type': 'application/json' }, 
    body: JSON.stringify(text) 
    }) 
} 

render() { 
    return (
    <form onSubmit={this.handleSubmit}> 
     <div className ="form-group"> 
     <label>Add a Note:</label> 
     <textarea className="form-control" name="note" rows="5"> 
     </textarea> 
     <button ref="textarea" className="btn btn-primary" 
     type="submit">Submit</button> 
     </div> 
    </form> 
) 
}

我把表格上的onsubmit事件偵聽器，並創建一個新FORMDATA實例與形式。然後，我創建了一個包含textarea的值的對象，以傳入獲取調用。

來源

2017-08-03 00:45:56

對於POST請求，您可能需要等待數據主體準備就緒。試試這個

app.post('/create-note', (req, res) => { 
    var body = ''; 
    request.on('data',function(data) { body += data; }); 
    request.on('end', function(data) { 
     postNote(body) 
      .then(() => { 
       res.sendStatus(201) 
      }) 
    }); 
})

來源

2017-08-02 02:21:50

感謝您的快速響應！我仍然得到相同的結果，表單中的數據仍然爲空。 –

嘗試在您的標記以下，並使用fetch

... 
<form method="POST" action="/create-note" enctype='application/json'> 
    ... 
</form> 
...

或因爲對形式的默認編碼是application/x-www-form-encoded(doc)，下面的中間件添加到您的應用程序明確放棄..

... 
app.use(bodyParser.urlencoded({ extended: true })); 
...

也可以試試......

... 
<button ref="form" onClick={this.handleClick} className="btn btn-primary" 
     type="submit">Submit</button> 
...

與

handleClick(e) { 
    e.preventDefault(); 
    const data = new FormData(this.refs.form); 

    fetch('/create-note', { 
    method: 'POST', 
    body: data 
    }) 

}

來源

2017-08-02 03:09:54

感謝您的迴應，但是這也失敗了。 –

嗯，你有其他的調試信息嗎？ console.log（req.body）後路由處理程序？ –

req.body和req.body.note均未定義 –

如何使用POST路徑從表單中檢索數據？

回答

相關問題