Axios-Mybatis

Axios post请求常见post请求种类form表单提交 method=“post” 同步（要素：页面是否刷新）axios.post() 异步操作.axios post入门案例编辑前端JS<!DOCTYPE html><html><head><meta charset="utf-8"><title>Axios测试</title&

AVA向晚

203人浏览 · 2021-12-08 16:45:56

AVA向晚 · 2021-12-08 16:45:56 发布

Axios post请求

常见post请求种类

form表单提交 method=“post” 同步（要素：页面是否刷新）
axios.post() 异步操作.

axios post入门案例

编辑前端JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios测试</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h1>Axios测试案例-2</h1>
		<script>
			/* 
			语法:
			1.参数 axios.post(URL地址,数据对象)
			2.注意事项: 与axios.get(url,{params:对象})请求写法不一样.
			*/
		   let url1 = "http://localhost:8080/axios/saveUser"
		   let user1 = {id:100,name:"猫",age:2,sex:"母"}
		   axios.post(url1,user1)
				.then(function(promise){
					console.log(promise.data)
				})
		</script>
	</body>
</html>

说明: axios.post请求中如果传递了js对象.则发送到后端服务器的数据是 JSON串.

在这里插入图片描述

后端

/**
     * URL: "http://localhost:8080/axios/saveUser"
     * 参数: {"id":100,"name":"猫","age":2,"sex":"母"}  json串
     * url1: http://xxx/axios/saveUser?id=xxx&name=xxx
     * 返回值: "新增用户成功!!!"
     * 难点:
     *      1.Get请求数据是通过?key=value&key2=value2的方式获取
     *        post请求 数据是json串 数据结构不同. 所以不能使用User对象接收
     *      2.JSON串想把法转化为User对象
     *          User转化为JSON串  @ResponseBody
     *          JSON串转化为User  @RequestBody
     *      3.JSON串转化 要求json串中的属性与对象中的属性一致,
     *                  并且赋值时调用对象的set方法
     *      4.@RequestMapping可以支持任意类型的请求. 但是这样的写法不安全.
     *        改进: 只能接收固定类型的请求
     *          @PostMapping("/saveUser")
     *          @GetMapping
     *          @PutMapping
     *          @DeleteMapping
     */
    @RequestMapping("saveUser")
    public String saveUser(@RequestBody User user){
        System.out.println(user);
        return "新增用户成功!!!";
    }

在这里插入图片描述

关于请求常见异常

405 异常 ajax的请求类型与后端接收的请求类型不匹配.
400异常参数类型不匹配
404异常请求路径找不到

请求类型和业务关系

常见请求类型:

1.GET 查询操作
2.DELETE 删除操作 get/delete 用法相同

3.POST 1.表单数据提交 2.新增操作
4.PUT 修改操作 post/put 用法相同

用户修改操作

编辑页面JS

/**
			 * 业务需求:
			 * 		完成用户的修改操作. 
			 * 		将ID=100的数据 name改为张三 age改为18 sex改为女
			 * URL: http://localhost:8080/axios/updateUser
			 * 返回值:  修改成功!!!   数据要求后端打印
			 */
			let url2="http://localhost:8080/axios/updateUser"
			let user2={id:100,name:"张三",age:18,sex:"女"}
			axios.put(url2,user2)
				 .then(function(promise){
					 console.log(promise.data)
				 })

编辑AxiosController

/**
     *  URL:http://localhost:8080/axios/updateUser
     *  参数: JSON串
     *  返回值: String
     */
    @PutMapping("/updateUser")
    public String updateUser(@RequestBody User user){
        System.out.println(user);
        return "修改成功!!!";
    }