这篇文章主要讲解了“Vue怎么发送ajax请求”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么发送ajax请求”吧！首页安装并引入axiOS1、npm install axios -
这篇文章主要讲解了“Vue怎么发送ajax请求”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么发送ajax请求”吧！
首页安装并引入axiOS
1、npm install axios -S #直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中
2、网上直接下载axios.min.js文件
3、通过script src的方式进行文件的引入<script src="js/axios.min.js"></script>
axios基本使用方法
发送get请求
1、基本使用格式
格式1：axios([options]) #这种格式直接将所有数据写在options里，options其实是个字典
格式2：axios.get(url[,options]);
2、传参方式：
通过url传参
通过params选项传参
下面我们来看一个vue发送ajax get请求实例代码
<!DOCTYPE html><html lang="en"><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>发送post请求（push,delete的非get方式的请求都一样）
1、基本使用格式
格式：axios.post(url,data,[options]);
2、传参方式
1、自己拼接为键值对
2、使用transfORMRequest，在请求发送前将请求数据进行转换
3、如果使用模块化开发，可以使用qs模块进行转换
4、注释：axios默认发送post数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以JSON形式传参
下面看是一个vue发送ajax post请求实例代码
<!DOCTYPE html><html lang="en"><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请求都是在同一域名下进行的也就是同域或者说是同源
那么vue如何发送跨域的ajax请求呢？
vue发送跨域ajax请求
1、须知：axios本身并不支持发送跨域的请求，没有提供相应的api，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库
2、使用vue-resource发送跨域请求
3、 安装vue-resource并引入
npm info vue-resource #查看vue-resource 版本信息
cnpm install vue-resource -S #等同于cnpm install vue-resource -save
4、基本使用方法（使用this.$http发送请求）
this.$http.get(url, [options])
this.$http.head(url, [options])
this.$http.delete(url, [options])
this.$http.jsonp(url, [options])
this.$http.post(url, [body], [options])
this.$http.put(url, [body], [options])
this.$http.patch(url, [body], [options])
下面再来看两个实例
向360搜索发送数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>发送AJAX请求</title> <script src="js/vue.js"></script> <script src="js/axios.js"></script> <script src="js/vue-resource.js"></script></head><body><div id="itany"> <a>{{name}}</a> <button v-on:click="send">sendJSONP</button></div></body><script> new Vue({ el: '#itany', data:{ name: 'alice', age: 19 }, methods:{ send:function(){// https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=Word&word=a this.$http.jsonp('https://sug.so.360.cn/suggest', {params:{ word:'a' }} ).then(function (resp) { console.log(resp.data) }) } } })</script></html>vue发送跨域ajax请求带jsonp参数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>发送AJAX请求</title> <script src="js/vue.js"></script> <script src="js/axios.js"></script> <script src="js/vue-resource.js"></script></head><body><div id="itany"> <button v-on:click="send">向百度搜索发送JSONP请求</button></div></body><script> new Vue({ el:'#itany', data:{ name:'za' }, methods:{ send:function () { this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {params:{wd:'a'}, jsonp:'cb', //百度使用的jsonp参数名为cb，所以需要修改,默认使用的是callbakc参数就不用修改 }).then(function (resp) { console.log(resp.data) }).catch(function (err) { console.log(err) }) } } })</script></html>Vue作为一个没有入侵性的框架并不限制你使用ajax框架
使用了Vue后，ajax部分你可以做如下选择：
1.使用JS原生XHR接口
2.引入Jquery或者Zepto 使用$.ajax();
3.Vue的GitHub上提供了vue-resource插件 ：
4.使用 fetch.js
5.自己封装一个ajax库
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
感谢各位的阅读，以上就是“vue怎么发送ajax请求”的内容了，经过本文的学习后，相信大家对vue怎么发送ajax请求这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
--结束END--
本文标题: vue怎么发送ajax请求
本文链接: https://lsjlt.com/news/346063.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0