1、首先引入axios.js库
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2、HTML
<button id="btnUpload">发起GET请求</button>
<button id="btnUpload2">发起POST请求</button>
<button id="btn1">直接使用axios发起GET请求</button>
<button id="btn2">直接使用axios发起POST请求</button>
3、JS
document.querySelector('#btnUpload').addEventListener('click',function() {
var url = 'http://www.liulongbin.top:3006/api/get'
var paramsObj = {name: 'zs',age: 3}
// axios.get(url,{要传输的对象}).then(回调函数)
axios.get(url,{params: paramsObj}).then(function(res){
console.log(res.data);
})
})
document.querySelector('#btnUpload2').addEventListener('click',function(){
// 请求的URL地址
var url = 'http://www.liulongbin.top:3006/api/post'
// 要提交到服务器的数据
var dataObj = {address:'北京',location: '顺义'}
// 调用axios.post()发起POST请求
axios.post(url,dataObj).then(function(res) {
console.log(res.data);
})
})
document.querySelector('#btn1').addEventListener('click',function(){
// 请求的URL地址
var url = 'http://www.liulongbin.top:3006/api/get'
// 要提交到服务器的数据
var paramsData = {name:'钢铁侠',age: '35'}
axios({
method: 'GET',
url: url,
params: paramsData
}).then(function(res){
console.log(res.data);
})
})
document.querySelector('#btn2').addEventListener('click',function(){
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: {bookname:'大灰狼啃小红',price: '88'}
}).then(function(res){
console.log(res.data);
})
})