//前端页面
<!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;
}