//前端頁面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Axios的post請求方式</title>
<!--引入axios的相關依賴-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<input type="text" id="tx" placeholder="這是map的value值" title="這是map的value值">
</body>
<script>
//post請求
//axios的post請求傳遞參數的兩種方式
//第一種使用字符串進行參數傳遞："name='劉詩詩'&age=38"
//第二種方式后端接口直接使用@RequestBody注解形式接收參數 前端使用{name:劉詩詩,age:18}進行傳參
axios.post("http://127.0.0.1:8083/LQ/axios/save","name=劉詩詩&age=18")
.then(function (response) {
console.log(response.data)
console.log(response.data['success'])
console.log(response.data['message'])
var success = response.data['success']
document.getElementById("tx").value = success //通過獲取id元素把response.data取得值附加到text文本框
}).catch(function (err) {
console.log(err)
})
</script>
</html>
//后端代碼
@PostMapping("save")
@CrossOrigin//跨域
public Map<String,Object> save(String name,Integer age){
System.out.println("name ="+name);
System.out.println("age="+age);
Map<String, Object> map=new HashMap<>();
map.put("success",true);
map.put("message","保存成功");
return map;
}
