网站设计公司 -,适合平面设计师的网站,北京城乡住房建设厅网站,天津高端网站建设公司Ajax
Ajax#xff08;Asynchronous JavaScript And XML#xff0c;异步的JavaScript和XML#xff09;。
作用是#xff1a;
数据交换#xff1a;通过Ajax可以给服务器发送请求#xff0c;并获取服务器响应的数据。异步交互#xff1a;可以在不重新加载整个页面的情况…Ajax
AjaxAsynchronous JavaScript And XML异步的JavaScript和XML。
作用是
数据交换通过Ajax可以给服务器发送请求并获取服务器响应的数据。异步交互可以在不重新加载整个页面的情况下与服务器交换并更新部分网页的技术如搜索联想、用户名是否可用的校验等等。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script/head
bodyinput typebutton value获取数据 onclickgetClick()
/body
scriptfunction getClick() {// 创建一个XMLHttpRequest对象let XmlHttpRequest new XMLHttpRequest();// 设置请求方式和请求地址XmlHttpRequest.open(GET, http://yapi.smart-xwork.cn/mock/169327/emp/list);XmlHttpRequest.send(); // 发送请求// 监听请求状态XmlHttpRequest.onreadystatechange function() {if (XmlHttpRequest.readyState 4 XmlHttpRequest.status 200) {// console.log(XmlHttpRequest.responseText);let data JSON.parse(XmlHttpRequest.responseText);console.log(data);}}}
/script
/htmlAxios
Axios对原生的Ajax进行了封装简化书写快速开发。
需要引入Axios的JS文件使用Axios发送请求并获取响应结果。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
/head
bodyscriptaxios({method: get,url: http://localhost:3000/lab}).then((response) {console.log(response.data)});axios({method: post,url: http://localhost:3000/lab,data: {name: Lab 1,description: Lab 1 description}}).then((response) {console.log(response.data)});/script
/body
/html请求方式别名
axios.get(url [,config])
axios.delete(url [,config])
axios.post(url [,data [,config]])
axios.put(url [,data [,config]])AJAX - XMLHttpRequest 对象 (w3school.com.cn)
Axios中文文档 | Axios中文网 (axios-http.cn)
