<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios练习</title>
</head>
<body>
<h1>Axios远程调用练习</h1>
<script src="../js/axios.js"></script>
<script>
/*
1.promise对象解决了传统ajax中的回调地狱问题.
2.Axios封装了promise对象,异步调用更加简洁
3.常见请求类型: 1.get(查) 2.pust(from新增) 3.put(改) 4.delece
4.分组: 用法相同 get/delece post/put
注意事项: 默认条件下通过浏览器只能发起get请求!!!
*/
/*
1.Axios入门案例-get请求
原始方式: 参数: 1.url地址 2.请求参数 3.回调函数
axios方式: 参数: 1.url地址 2.请求参数
关键字: then(回调函数)
*/
let result = ''
axios.get("http://localhost:8090/getUser")
.then(function(result) {
//result返回值是一个promise对象.
console.log(result)
//动态获取服务器返回值使用result.data
console.log(result.data)
})
//2. 箭头函数写法 result参数只有一个可以省略括号
axios.get("http://localhost:8090/getUser")
.then(result => {
console.log(result.data)
})
/*
3. 带参数的请求方式1---字符串拼接
需求: 查询ID=100的用户数据
url: http://localhost:8090/getUser
*/
axios.get("http://localhost:8090/getUserById?id=1")
.then(result => {
console.log(result.data)
})
/*
根据对象查询数据库
封装对象
*/
let user = {
name: '大乔',
sex: '女'
}
axios.get("http://localhost:8090/getUserByNS", {
//关键字params
params: user
})
.then(result => {
console.log(result.data)
})
/*
利用restFul风格
查询name包含"君"的数据
http://localhost:8090/user/君 get
*/
axios.get("http://localhost:8090/user/虾")
.then(result => {
console.log(result.data)
})
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios练习</title>
</head>
<body>
<h1>Axios远程调用练习</h1>
<script src="../js/axios.js"></script>
<script>
/*
get请求方式与delect方式一至
*/
//1.删除name="xx"的数据 使用params 对象的方式实现
//2.删除name="xx"的数据 sex="xx" 使用restFul风格实现
let result = ''
let user = {
name : '法国'
}
axios.delete("http://localhost:8090/delectByName", {
params: user,
})
.then(result => {
console.log(result.data)
})
axios.delete("http://localhost:8090/delectByNameSex/德国/女")
.then(result => {
console.log(result.data)
})
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户列表展现</title>
</head>
<body>
<div id="app">
<table id="tab1" border="1px" width="700px" align="center">
<tr>
<td colspan="4" align="center">
<h1>表格数据</h1>
</td>
</tr>
<tr align="center">
<td>ID编号</td>
<td>名称</td>
<td>年龄</td>
<td>性别</td>
</tr>
<!-- 遍历数据,实现表格展示 -->
<tr align="center" v-for="user in userList">
<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>修改</button>
<button @click="deleteUserById(user.id)">删除</button>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
userList: []
},
methods: {
//1. 定义获取远程数据的ajax请求
getUserList() {
axios.get("http://localhost:8090/getUser")
.then(result => {
//服务器返回的是JSON串,经过JS程序解析变为JS对象
//实现对象的赋值
this.userList = result.data
})
},
deleteUserById(id) {
axios.delete("http://localhost:8090/delectById/id")
axios.delete("http://localhost:8090/delectById/"+id)
.then(result => {
console.log(result.data)
//刷新页面
this.getUserList()
})
}
},
created() {
//触发函数调用
this.getUserList()
}
})
</script>
</body>
</html>