React使用axios的post方式和後端進行資料互動

hcolder發表於2020-10-05

一、

以下的例子是通過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"));
 	}

相關文章