我有一個(gè)簡(jiǎn)單的React表單。我正在嘗試使用Fetch API將數(shù)據(jù)從此表單發(fā)送到我的Java后端。這是我的React Form文件:import React, {Component} from 'react';class Form extends Component { constructor(props){ super(props); this.state={value:""}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this);}handleChange(event){ event.preventDefault(); this.setState({value:event.target.value});}handleSubmit(event){ event.preventDefault(); const data = new FormData(event.target); fetch('http://localhost:8080/add/person', { method: 'POST', body: data });}render(){ return( <form onSubmit={this.handleSubmit}> <label>Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit"/> </form> ); }}由于某種原因,當(dāng)我處于調(diào)試模式時(shí),數(shù)據(jù)變量始終具有空的JSON。在我的Java后端中,當(dāng)我收到請(qǐng)求時(shí),我看到的是空白表格數(shù)據(jù)。關(guān)于為什么我無法將數(shù)據(jù)發(fā)送到Java后端的任何想法?
2 回答

慕尼黑的夜晚無繁華
TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超6個(gè)贊
您的問題與后端無關(guān)-fetch
代碼看起來正確。
FormData
沒有按照您的期望進(jìn)行構(gòu)建。您可以通過打開Chrome Devtools的“網(wǎng)絡(luò)”標(biāo)簽并嘗試查看請(qǐng)求的過程來解決此問題:空請(qǐng)求有效負(fù)載。
問題在于FormData
構(gòu)造函數(shù)的參數(shù)依賴于input
具有name
屬性的表單中的每個(gè)屬性,而您缺少該屬性。如果添加(name="name"
),則前端應(yīng)按預(yù)期運(yùn)行:
<input type="text" name="name" value={this.state.value} onChange={this.handleChange} />
編輯:根據(jù)您上面的對(duì)話,似乎您也有服務(wù)器端CORS問題。我的答案解決了您的原始問題,但是是的,您也需要解決CORS,最簡(jiǎn)單的方法可能是引用您所使用的任何Java框架的文檔。這是一個(gè)非常常見的問題,應(yīng)該在FAQ中。
添加回答
舉報(bào)
0/150
提交
取消