山东济南seo整站优化,seo研究中心超逸seo,威海网站开发公司,腾讯云可以做网站吗什么是ajax
概念#xff1a; Asynchronous JavaScript And XML#xff0c;异步的JavaScrip和XML#xff0c;重点在异步。 作用#xff1a; 1#xff0c;数据交互#xff0c;可以通过ajax给服务器发送请求#xff0c;并获取服务器响应的数据。 2#xff0c;异步交互 Asynchronous JavaScript And XML异步的JavaScrip和XML重点在异步。 作用 1数据交互可以通过ajax给服务器发送请求并获取服务器响应的数据。 2异步交互可以不用重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如联想搜索百度查询和用户名是否可用的校验等等。 原生ajax
环境配置
下载
链接https://pan.baidu.com/s/1bswgGUGqj3eS8L1wFbrjEw
提取码mvt4本地起一个测试环境127.0.0.1:8080服务
Java.exe -jar web-server.jar使用原生ajax
使用原生ajax发送异步请求一共有三步
创建XMLHttpRequest发送异步请求获取服务响应数据
代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title原生Ajax/title
/head
bodyinput typebutton value获取数据 onclickgetData()div iddiv1/div/body
scriptfunction getData(){//1. 创建XMLHttpRequest var xmlHttpRequest new XMLHttpRequest();//2. 发送异步请求xmlHttpRequest.open(GET,http://127.0.0.1:8080/emp/list);xmlHttpRequest.send();//发送请求//3. 获取服务响应数据xmlHttpRequest.onreadystatechange function(){if(xmlHttpRequest.readyState 4 xmlHttpRequest.status 200){document.getElementById(div1).innerHTML xmlHttpRequest.responseText;}}}
/script
/html效果
打开控制面板中的网络其中xhr就是ajax发送的异步请求。 Axios
原生ajax比较繁琐。实际开发中会使用Axios框架发送异步请求减少代码量。
什么是Axios
介绍Axios对原生的Ajax进行了封装简化书写快速开发。 官网https://www.axios-http.cn
Axios入门
1引入Axios的js文件
scriptjs/axios-0.18.0.js/script2 使用Axios发送请求下面代码中有体现实际查看代码部分。
注释部分就是Axios发送异步请求的部分在此基础上还可以简写为未注释部分。 请求别名简化书写:
代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios/title!-- 引入axios js文件 --script srcjs/axios-0.18.0.js/script
/head
bodyinput typebutton value获取数据GET onclickget()input typebutton value删除数据POST onclickpost()/body
scriptfunction get(){//通过axios发送异步请求-get// axios({// method: get,// url: http://yapi.smart-xwork.cn/mock/169327/emp/list// }).then(result {// console.log(result.data);// })axios.get(http://127.0.0.1:8080/emp/list).then(result {console.log(result.data);})}function post(){//通过axios发送异步请求-post// axios({// method: post,// url: http://yapi.smart-xwork.cn/mock/169327/emp/deleteById,// data: id1// }).then(result {// console.log(result.data);// })axios.post(http://127.0.0.1:8080/emp/deleteById,id1).then(result {console.log(result.data);})}
/script
/html效果 Axios小案例
需求 使用axios发送异步请求获取服务端数据然后渲染到前端的表格中。
获取数据主要响应包的data整个响应的数据在Axios框架中为data。所以想要获取响应包中的data就是获取data.data部分数据即可。 如下图 然后就是使用vue中的{{}} 插值的方法将对应的值插入表格中。
代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios-案例/titlescript srcjs/axios-0.18.0.js/scriptscript srcjs/vue.js/script
/head
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth图像/thth性别/thth职位/thth入职日期/thth最后操作时间/th/trtr aligncenter v-for(emp,index) in empstd{{index 1}}/tdtd{{emp.name}}/tdtdimg :srcemp.image width70px height50px/tdtdspan v-ifemp.gender 1男/spanspan v-ifemp.gender 2女/span/tdtd{{emp.job}}/tdtd{{emp.entrydate}}/tdtd{{emp.updatetime}}/td/tr/table/div
/body
scriptnew Vue({el: #app,data: {emps:[]},mounted () {//发送异步请求,加载数据axios.get(http://127.0.0.1:8080/emp/list).then(result {// 赋值给emps数据模型this.emps result.data.data;})}});
/script
/html效果图 参考文章
https://www.bilibili.com/video/BV1m84y1w7Tb
