Ajax+Axios

2 0 0

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>

# 随笔