博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞收藏⭐评论✍
文章目录
1.0 Ajax 概述
2.0 Axios 概述
3.0 综合案例
1.0 Ajax 概述
通过 Ajax 可以给服务器发送请求,并获取服务器响应的数据。异步交互是指,可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:用户名是否可用的校验等等。
简单来说,Ajax 的作用就是用来发送请求给服务器,得到响应后获取数据。
举个例子:
/* 1.0 创建对象 */
var xmlHttpRequest = new XMLHttpRequest();
/* 2.0 发送异步请求 */
xmlHttpRequest.open("get","http://api.doc.jiyou-tech.com/mock/6391/text");
xmlHttpRequest.send();
/* 3.0 获取数据 */
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
document.getElementById("id1").innerHTML = xmlHttpRequest.responseText;
}
}
运行结果:
成功获取服务器的响应,xmlHttpRequest.readyState 的值会赋值为 4 ,status 的值为 200 。
手册: AJAX - XMLHttpRequest 对象 (w3school.com.cn)
2.0 Axios 概述
Axios 是对原生的 Ajax 进行了封装,简化书写,快速开发。作用同样是给服务器发送请求,并获取服务器响应的数据。
引入 Axios 的 js 文件:
采取的是 CDN 的方式导入到 HTML 中。
语法结构:
axios({
methods:"get",
url:"http://api.doc.jiyou-tech.com/mock/6391/text"
}).then((result) => {
alert(result);
})
axios({
methods:"post",
url:"http://api.doc.jiyou-tech.com/mock/6391/text"
}).then((result) => {
alert(result);
})
如果在 get 中有参数添加,直接在 url 后面接上 ? 后面加上参数即可;如果在 post 中有参数添加,需要对象 data 中添加参数,如:
axios({
methods:"post",
url:"http://api.doc.jiyou-tech.com/mock/6391/text",
data:"id=1"
}).then((result) => {
alert(result);
})
还有更加简便的写法:
axios.get("http://api.doc.jiyou-tech.com/mock/6391/text").then((result)
=> { alert(result);
})
axios.post("http://api.doc.jiyou-tech.com/mock/6391/text","id=1").then((result)
=> { alert(result);
})
一般用这种方式比较多。
使用 Axios 发送请求,并获取响应结果
举个例子:
{{emps.name}}
new Vue({
el:"#app",
data:{
emps:""
},
mounted() {
axios.get("http://api.doc.jiyou-tech.com/mock/6391/text").then((result) => {
this.emps = result.data;
})
}
})
利用 Axios 获取数据后,交给 Vue 进行网页的渲染。
3.0 综合案例
利用 Axios 向服务器发送请求,并返回服务器响应的结果,再交给 vue 对网页进行渲染。
模拟服务器中的数据:
代码如下:
ID | 姓名 | 年龄 | 性别 | 成绩 | |
---|---|---|---|---|---|
{{index+1}} | {{emp.name}} | {{emp.age}} | 男 | 女 | {{emp.score}} |
new Vue({
el:"#app",
data:{
emps:[]
},
mounted() {
axios.get("http://api.doc.jiyou-tech.com/mock/6407/text").then((result)
=> { this.emps = result.data.data
})
}
})
还用到了 vue 生命周期中的 mounted() ,挂载结束后,就会自动调用该函数。this 将获取的 json 赋值给当前对象的 emps 。
运行结果:
好文链接
发表评论