ajax怎么在vue中使用?
axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护
本文为大家介绍vue使用axios发送AJAX请求
1、首页安装并引入axios
npm install axios -S #直接下载axios组件,下载完毕后axios.js就存放在node_modules\axios\dist中
2、发送get请求
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>发送AJAX请求</title> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script> <script> window.onload=function(){ new Vue({ el:'#itany', data:{ user:{ name:'alice', age:19 }, }, methods:{ send(){ axios({ method:'get', url:'http://www.baidu.com?name=tom&age=23' }).then(function(resp){ console.log(resp.data); }).catch(resp => { console.log('请求失败:'+resp.status+','+resp.statusText); }); }, sendGet(){ axios.get('server.php',{ params:{ name:'alice', age:19 } }) .then(resp => { console.log(resp.data); }).catch(err => { // console.log('请求失败:'+err.status+','+err.statusText); }); }, } }); } </script> </head> <body> <div id="itany"> <button @click="send">发送AJAX请求</button> <button @click="sendGet">GET方式发送AJAX请求</button> </div> </body> </html>
3、发送post请求(push,delete的非get方式的请求都一样)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>发送AJAX请求</title> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script> <script> window.onload=function(){ new Vue({ el:'#itany', data:{ user:{ name:'alice', age:19 }, }, methods:{ sendPost(){ // axios.post('server.php',{ // name:'alice', // age:19 // }) //该方式发送数据是一个Request Payload的数据格式,一般的数据格式是Form Data格式,所有发送不出去数据 // axios.post('server.php','name=alice&age=20&') //方式1通过字符串的方式发送数据 axios.post('server.php',this.user,{ //方式2通过transformRequest方法发送数据,本质还是将数据拼接成字符串 transformRequest:[ function(data){ let params=''; for(let index in data){ params+=index+'='+data[index]+'&'; } return params; } ] }) .then(resp => { console.log(resp.data); }).catch(err => { console.log('请求失败:'+err.status+','+err.statusText); }); }, } }); } </script> </head> <body> <div id="itany"> <button @click="send">发送AJAX请求</button> <button @click="sendGet">GET方式发送AJAX请求</button> </div> </body> </html>
使用了Vue后,ajax部分你可以做如下选择:
1.使用JS原生XHR接口
2.引入JQuery或者Zepto 使用$.ajax();
3.Vue的github上提供了vue-resource插件 :
4.使用 fetch.js
5.自己封装一个ajax库
至于哪种方式适合自己的项目大家可以自行选择
© 著作权归作者所有
举报
发表评论
0/200