ajax-restful方式/ajax-post方式

ajax-restful方式<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="../js/axios.js"></script></head><body><h1>r

T-影

309人浏览 · 2021-09-30 10:36:56

T-影 · 2021-09-30 10:36:56 发布

文章目录

ajax-get-restful方式
- 前端代码
- 后端代码
ajax-post方式
async-await 关键字
用户列表展现(增删改查)：前端&后端

ajax-get-restful方式

在这里插入图片描述

前端代码

拼接变量使用反引号和 ${name}/$ {sex} **

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h1>restful</h1>
		<script>
			let name='关羽'
			let sex='男'
			let url=`http://localhost:9000/ajax/user/${name}/${sex}`
			axios.get(url)
				 .then(function(promise){
					 console.log(promise.data)
				 })
		</script>
	</body>
</html>

后端代码

 @GetMapping("user/{name}/{sex}")
    public User findByNS(User user){
        return userService.findByNS(user);
    }

ajax-post方式

指定公共的请求前缀
axios.defaults.baseURL="http://localhost:9000"
前端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>post</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h1>post</h1>
		<script>
			//指定公共的请求前缀
			axios.defaults.baseURL="http://localhost:9000"
			let url='/ajax/saveUser'
			let user={
				name: '祖国母亲',
				age: 72,
				sex: '女'
			}
			axios.post(url,user)
				 .then(function(promise){
					 console.log(promise.data)
				 })
		</script>
	</body>
</html>

后端
参数必须加注解：@RequestBody（json串过来需要解析）

    @PostMapping("saveUser")
    public String saveUser(@RequestBody User user){
        userService.saveUser(user);
        return "保存成功";
    }

async-await 关键字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简化</title>
	</head>
	<body>
		<h1>async-await写法</h1>
		<!-- 导入js jar包 -->
		<script src="../js/axios.js"></script>
		<script>
			//1.指定请求前缀
			axios.defaults.baseURL = "http://localhost:8090"
			
			/**
			 * 需求: 要求ajax请求在一行完成!
			 * 解决方案: async-await
			 * 语法说明:
			 * 		1.async 必须标识函数方法
			 * 		2.await 必须标识ajax请求
			 *  实际意义:
			 * 		解决了ajax中的头号难题, "回调地狱"问题
			 */
			
			//1.定义函数
			async function getUser(){
				let promise = await axios.get("/getUser")
				console.log(promise.data)
				
				//解构赋值 固定写法 死记硬背
				let {data: result} = await axios.get("/getUser")
				console.log(result)
			}
			
			//2.调用函数
			getUser()
		</script>
	</body>
</html>

用户列表展现(增删改查)：前端&后端

效果展示

在这里插入图片描述

前端代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现案例</title>
	</head>
	<body>
		<div id="app">
			<div align="center">
				<h3 align="center">用户新增</h3><br>
				<p>
					用户名称: <input type="text" name="name" v-model="addUser.name"/>
					用户年龄: <input type="text" name="age" v-model="addUser.age"/>
					用户性别: <input type="text" name="sex" v-model="addUser.sex"/>
					<button @click="addUserBtn">新增</button>
				</p>
			</div>
			<hr />
			<div align="center">
				<h3 align="center">用户修改操作</h3><br>
				<p>
						用户ID号: <input type="text" name="id" v-model="updateUser.id" disabled/>
						用户名称: <input type="text" name="name" v-model="updateUser.name"/>
						用户年龄: <input type="text" name="age" v-model="updateUser.age"/>
						用户性别: <input type="text" name="sex" v-model="updateUser.sex"/>
						<button @click="updateUserCommit">修改</button>
				</p>
			</div>
			<h1 align="center">用户列表展现案例</h1>
			<table align="center" border="1px" width="80%">
				<tr align="center">
					<td>ID编号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="user in userList">
					<!-- <td>{{user.id}}</td> -->
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button @click="updateBtn(user)">修改</button>
						<button @click="deleteUser(user.id)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		
		<script src="js/axios.js"></script>
		<script src="js/vue.js"></script>
		<script>
			 axios.defaults.baseURL="http://localhost:8090"
			const app = new Vue({
				el: "#app",
				data: {
					userList: [],
					addUser:{
						name:'',
						age:'',
						sex:''
					},
					updateUser:{
						id:'',
						name:'',
						age:'',
						sex:''
					}
				},
				methods:{
					async getUserList(){
						let {data: result} = await axios.get("/ajax/findAll")
						this.userList = result
					},
					async addUserBtn(){
						let {data:result} = await axios.post("/ajax/addUser",this.addUser)
						alert('提交成功')
						this.addUser = {}
						this.getUserList()
					},
					updateBtn(user){
						this.updateUser = user
					},
					async updateUserCommit(){
						let {data:result} = await axios.put("/ajax/updateUser",this.updateUser)
						alert('修改成功')
						this.updateUser = {}
						this.getUserList()
					},
					//将user.id用形参变量userId接收
					async deleteUser(userId){
						let {data: result} = await axios.delete("/ajax/deleteUser",{params:{id:userId}})
						this.getUserList()
					}
				},
				mounted(){
					this.getUserList()
				}
			})
		</script>
	</body>
</html>

后端服务器

	//列表展现
    @GetMapping("findAll")
    public List<User> findAll(){
        return userService.findAll();
    }
    //增加数据
    @PostMapping("addUser")
    public void addUser(@RequestBody User user){
         userService.addUser(user);
    }
    //更新修改
    @PutMapping("updateUser")
    public void updateUser(@RequestBody User user){
        userService.updateUser(user);
    }
    //删除数据
    @DeleteMapping("deleteUser")
    public void deleteUser(Integer id){
        userService.deleteUser(id);
    }