国家骨干院校建设网站,阐述建站流程,自学装修设计从哪里入手,番禺门户网站建设文章目录 axios体验axios-查询参数常用请求方法数据提交 axios错误处理 axios体验 引入axios库 使用axios语法 axios({url: 目标资源地址
}).then((result){// 对服务器返回的数据做后续处理
})完整实例 !DOCTYPE html
html langenhead目标资源地址
}).then((result){// 对服务器返回的数据做后续处理
})完整实例 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAJAX概念和axios使用/title
/headbody
!--axios库地址https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库
--
p classmy-p/p
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
script// 2. 使用axios函数axios({url: http://hmajax.itheima.net/api/province}).then(result{console.log(result)console.log(result.data.list)console.log(result.data.list.join(br))// 把准备好省份列表插入到页面document.querySelector(.my-p).innerHTML result.data.list.join(br)})
/script
/body
/html运行结果
axios-查询参数
语法使用axios提供的params选项axios({url: 目标资源地址params:{参数名:值}
}).then((result){// 对服务器返回的数据做后续处理
})注意axios在运行时把参数名和值会拼接到url ?参数名值 demo !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAJAX查询参数/title
/headbody
!--axios库地址https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址http://hmajax.itheima.net/api/city目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库
--
p classmy-p/p
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
script// 2. 使用axios函数axios({url:http://hmajax.itheima.net/api/city,// 查询参数params:{pname:贵州省}}).then((result){console.log(result.data.list)document.querySelector(.my-p).innerHTMLresult.data.list.join(br)})
/script
/body
/html运行结果
常用请求方法
请求方法对服务器资源要执行的操作 请求方法操作GET获取数据POST提交数据PUT修改数据全部DELETE删除数据PATCH修改数据部分
数据提交
axios请求配置
url请求的URL地址method请求的方法GET可以省略不写不区分大小写data提交的数据axios({url: 目标资源地址,method:请求方法,data:{参数名值}
}).then((result){// 对服务器返回的数据做后续处理
})axios错误处理
语法在then方法的后面通过点语法调用catch方法传入回调函数并定义形参
axios({// 请求选项
}).then(result{// 处理数据
}).catch(error{// 处理错误
})
