Ajax技术特点:异步和无刷新. 就是一个jQuery库,src引入就可以了
异步:无需等待服务器返回结果.就是各忙各的不是一件事一件事去做.比如烧水才能洗碗还要扫地.我可以先去烧水,然后去扫地,烧好了水我就刷碗.在我收到响应之前我先去做别的事情,收到了响应我再做这件事
不刷新:比如我点赞朋友圈.点赞不会刷新
一般用于不刷新或局部刷新.局部刷新.dom操作比如详细展开.就是局部刷新
四种请求方式$.ajax $.get $.post $.getjson(json要求返回json的格式字符串)
get没有post数据传递的多.get请求没有post安全.get请求参数会跟着后面post不会.get快有缓存.post没缓存
$.ajax({})
里面大括号里是参数是键值对.
type:请求方式(get或post) —-1
url:请求地址url(访问服务器的什么地址)(请求的数据的地址)—-2
async:是否异步,默认true表示异步
data:当你需要请求的时候额外传递的数据,发送到服务器的数据—–3
datatype:预期服务器返回的数据类型(默认服务器返回的是字符串,希望返回的类型)
success:请求成功时调用此函数function(){}—–4
一般就上面四个需要的
JSON.parse(data) 数据转换成json对象
var ul = $(“
“);
$(“body”).append(ul);
$.get('请求json文件地址',{传递的参数,键值对}, 一个函数拿到的返回值)
语法和ajax一模一样只是简化语法
post和get一样,只不过需要服务器
$.getJSON,区别是必须返回的格式是json的格式
ajax
作用:
数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。
这个异步直接理解为,一部分发生变化,页面不用重新加载。比如点赞,展开显示
同步:
服务器在处理逻辑的时候要客户端要处于等待状态。等待服务器响应
异步:
向服务器发送请求,在等待服务器处理的过程当中,客户端可以继续执行其他操作,继而再继续访问
下面不用多说,直接看下一个axios异步加载
<body>
<input type="button” value="获取数据” onclick="getData()">
<div id="divl"></div>
</body>
<script>
function getData(){
//1,创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest () ;
//2。 发送异步请求
xmlHttpRequest.open('GET','http://yapi.smart-xwork,cn/mock/169327/emp/list');
xmlHttpRequest.send();//发送请求
//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function() {
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
document.getElementById('divl').innerHTML = xmlHttpRequest,responseText;
}
}
}
</script>
上面不多说了看下一个Axios
引入Axios的js文件
文件放在head底部
axios({
method: "get",
url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then((result) => (
console.log(result.data);
});
调用成功自动调用箭头函数
axios.get(url[,config])
axios.delete(url[, config])
axios.post(url[,datal, config]])
axios.put(url[, datal, config]])
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) =>{
console.log(result.data);
}
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteByld","id=1").then((result) => {
console.log(result.data);
});
钩子函数,加载发送异步请求
mounted() {
console.log(“Vue挂载完毕,发送请求获取数据”);
},
<tr align="center” v-for="(emp,index) in emps">
<td>{{index + 1}}</td>
<td>{{emp .name]}</td>
<td>
<img :src="emp.image" width="70px” height="50px">
</td>
<td>
<span v-if="emp.gender == 1">男</span>
<span v-if="emp.gender == 2">女</span>
</td>
<td>{{emp.job}}</td>
<td>{{emp.entrydate}}</td>
<td>{{emp.updatetime}}</td>
</tr>