山东网站制作软件,阅读网站模板下载,做网站字体一般设置,辽宁省建设厅网站怎样下载表格#x1f525;博客主页#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞#x1f44d;收藏⭐评论✍ 文章目录 1.0 Ajax 概述 2.0 Axios 概述 3.0 综合案例 1.0 Ajax 概述 通过 Ajax 可以给服务器发送请求#xff0c;并获取服务器响应的数据。异步交互是指#xff0c;可以在不… 博客主页 【小扳_-CSDN博客】 ❤感谢大家点赞收藏⭐评论✍ 文章目录 1.0 Ajax 概述 2.0 Axios 概述 3.0 综合案例 1.0 Ajax 概述 通过 Ajax 可以给服务器发送请求并获取服务器响应的数据。异步交互是指可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如用户名是否可用的校验等等。 简单来说Ajax 的作用就是用来发送请求给服务器得到响应后获取数据。
举个例子 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idid1/div/body
script/* 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;}}/script
/html 运行结果 成功获取服务器的响应xmlHttpRequest.readyState 的值会赋值为 4 status 的值为 200 。 手册 AJAX - XMLHttpRequest 对象 (w3school.com.cn) 2.0 Axios 概述 Axios 是对原生的 Ajax 进行了封装简化书写快速开发。作用同样是给服务器发送请求并获取服务器响应的数据。
引入 Axios 的 js 文件 采取的是 CDN 的方式导入到 HTML 中。 script srchttps://unpkg.com/axios/dist/axios.min.js/script 语法结构 scriptaxios({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);})
/script 如果在 get 中有参数添加直接在 url 后面接上 ? 后面加上参数即可如果在 post 中有参数添加需要对象 data 中添加参数如 axios({methods:post,url:http://api.doc.jiyou-tech.com/mock/6391/text,data:id1}).then((result) {alert(result);}) 还有更加简便的写法 script
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,id1).then((result) { alert(result);})
/script 一般用这种方式比较多。 使用 Axios 发送请求并获取响应结果
举个例子 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscript srchttps://unpkg.com/axios/dist/axios.min.js/script
/head
bodydiv idappspan {{emps.name}}/span/div/body
scriptnew Vue({el:#app,data:{emps:},mounted() {axios.get(http://api.doc.jiyou-tech.com/mock/6391/text).then((result) {this.emps result.data;})}})
/script
/html 利用 Axios 获取数据后交给 Vue 进行网页的渲染。 3.0 综合案例 利用 Axios 向服务器发送请求并返回服务器响应的结果再交给 vue 对网页进行渲染。
模拟服务器中的数据 代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.min.js/scriptscript srchttps://unpkg.com/axios/dist/axios.min.js/script
/head
bodydiv idapptable border1px cellspacing0px aligncenter width400pxtrthID/thth姓名/thth年龄/thth性别/thth成绩/th/trtr v-for(emp, index) in empstd aligncenter{{index1}}/tdtd aligncenter{{emp.name}}/tdtd aligncenter{{emp.age}}/tdtd aligncenter v-ifemp.gender 1男/tdtd aligncenter v-ifemp.gender 2女/tdtd aligncenter{{emp.score}}/td/tr/table/div
/body
scriptnew Vue({el:#app,data:{emps:[]},mounted() {axios.get(http://api.doc.jiyou-tech.com/mock/6407/text).then((result) { this.emps result.data.data})}})
/script
/html 还用到了 vue 生命周期中的 mounted() 挂载结束后就会自动调用该函数。this 将获取的 json 赋值给当前对象的 emps 。 运行结果
