React使用axios的post方式和後端進行資料互動
一、
以下的例子是通過Antd的Form表單提交資料,和後臺進行資料互動。
該方法通過axios的post方法,將value通過定義好的介面傳遞給後臺,並獲得響應體。
<Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
const onFinish = values => {
console.log("values: ", values);
axios.post('http://localhost:8089/dormitory/dormsave', values)
.then(function (response) {
console.log("response: ", response);
})
.catch(err => console.log(err))
};
此處注意傳遞的資料預設為String的Map,後臺可通過以下方式獲得其想要的引數。
@RequestBody Map<String,String> data
@CrossOrigin(origins = "*",maxAge = 3600)
@RequestMapping("/dormsave")
@ResponseBody
public String dormsave(@RequestBody Map<String,String> data){
System.out.println("save!!!!!!"+data);
Dorm dorm = new Dorm();
dorm.setD_id(Integer.parseInt(data.get("d_id")));
dorm.setTotal(Integer.parseInt(data.get("total")));
dorm.setUsed(Integer.parseInt(data.get("used")));
dorm.setDormadmin(data.get("dormadmin"));
}
相關文章
- 前後端資料互動(八)——請求方法 GET 和 POST 區別後端
- vue使用axios請求後端資料VueiOS後端
- 前後端資料交換互動後端
- SSH前後端資料互動後端
- Winform中使用HttpClient與後端api服務進行互動ORMHTTPclient後端API
- node 使用get和post向後臺請求資料的使用方式對比
- 前後端資料互動利器--Protobuf後端
- WEB程式的前後端資料互動流程Web後端
- vue axios資料請求get、post方法的使用VueiOS
- 前後端資料的互動--如何確保前後端資料的安全性?後端
- 一種安全的前後端資料互動方案後端
- 使用ETL進行資料接入的方式
- 資料互動——Promise、Ajax、axios和fetch的優缺點PromiseiOS
- 前後端資料的互動--如何實現資料加密?--02後端加密
- 軟體測試--前後端資料互動後端
- js和原生應用常用的資料互動方式JS
- 使用axios post 請求資料無法提交的問題iOS
- PHP與Python進行資料互動PHPPython
- 前後端資料互動形式隨手筆記後端筆記
- WEB前後端互動(UI介面和資料內容)如何實現Web後端UI
- 【爬坑日記】利用axios進行post提交formdataiOSORM
- React 中用jQuery的ajax 和 axios請求資料ReactjQueryiOS
- SpringBoot專案的html頁面使用axios進行get post請求Spring BootHTMLiOS
- HTML表單與PHP進行資料互動HTMLPHP
- vue的axios元件如何與PHP後端交換資料VueiOS元件PHP後端
- 前後端資料互動(三)——ajax 封裝及呼叫後端封裝
- 使用Node.js和Koa框架實現前後端互動Node.js框架後端
- 使用fidder進行post和get請求
- PHP前後端互動PHP後端
- 利用Vue3的axios+Python的flask實現前後端互動功能VueiOSPythonFlask後端
- 所有權背後的資料互動
- 在meteor中使用支付,以及與伺服器進行資料互動伺服器
- WPF和js互動 WebBrowser資料互動JSWeb
- 前後端資料互動(一)——網路請求詳解後端
- 前後端資料互動(二)——原生 ajax 請求詳解後端
- 前後端資料互動(四)——fetch 請求詳解後端
- 前後端API互動如何保證資料安全性?後端API
- GET和POST方式請求API介面資料返回API