介绍一个电影的网站模板,做类似交易猫的网站,中山里水网站建设,互联网代理商联盟平台一、Ajax
Asynchronous JavaScript And XML#xff0c;简称Ajax#xff0c;是异步的JavaScript和XML。 作用#xff1a;数据交换#xff0c;通过Ajax可以给服务器发送请求#xff0c;并获取服务器响应的数据。异步交互#xff1a;可以在不重新加载整个页面的情况下…一、Ajax
Asynchronous JavaScript And XML简称Ajax是异步的JavaScript和XML。 作用数据交换通过Ajax可以给服务器发送请求并获取服务器响应的数据。异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用的校验等。
一原生Ajax请求
1、创建XMLHttpRequest对象用于和服务器交换数据 2、向服务器发送请求 3、获取服务器响应数据
二Axios
对原生Ajax的封装简化书写快速开发。 官网https://www.axios-http.cn/ 实例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../JS/axios.min.js/scriptscript src../JS/vue.js/script
/head
bodyinput typebutton value获取数据get onclickget()input typebutton value删除数据post onclickpost()
/body
scriptfunction get(){axios({/* 通过get发送异步请求 */method:get,url:https://yapi.pro/mock/478286/userGetByID}).then((result) {console.log(result);})function post(){axios({/* 通过post发送异步请求 */method:post,url:http://yapi.smart-xwork.cn/mock/478286/deleteById,data:id 1}).then((result) {console.log(result);})}
/script
/html请求方式别名
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../JS/axios.min.js/scriptscript src../JS/vue.js/script
/head
bodyinput typebutton value获取数据get onclickget()input typebutton value删除数据post onclickpost()
/body
scriptfunction get(){// axios({// /* 通过get发送异步请求 */// method:get,// url:https://yapi.pro/mock/478286/userGetByID// }).then((result) {// console.log(result.data);// })axios.get(https://yapi.pro/mock/478286/userGetByID).then(result {console.log(result);})}function post(){//axios({// /* 通过post发送异步请求 */// method:post,// url:http://yapi.smart-xwork.cn/mock/169327/emp/deleteById,// data:id 1// }).then((result) {// console.log(result.data);// })axios.post(https://yapi.pro/mock/478286/deleteByID,id1).then(result {console.log(result);})}
/script
/html结果在Yapi中设置了端口才可以连接详情请看
