大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这期内容当中小编将会给大家带来有关vue中如何发送ajax请求,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
创新互联建站专注于企业营销型网站建设、网站重做改版、永胜网站定制设计、自适应品牌网站建设、H5页面制作、商城开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为永胜等各大城市提供网站开发制作服务。
首页安装并引入axios
1、npm install axios -S #直接下载axios组件,下载完毕后axios.js就存放在node_modules\axios\dist中
2、网上直接下载axios.min.js文件
3、通过script src的方式进行文件的引入
axios基本使用方法
发送get请求
1、基本使用格式
格式1:axios([options]) #这种格式直接将所有数据写在options里,options其实是个字典
格式2:axios.get(url[,options]);
2、传参方式:
通过url传参
通过params选项传参
下面我们来看一个vue发送ajax get请求实例代码
发送AJAX请求
发送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请求实例代码
发送AJAX请求
上面我们所介绍的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搜索发送数据
发送AJAX请求
vue发送跨域ajax请求带jsonp参数
发送AJAX请求
Vue作为一个没有入侵性的框架并不限制你使用ajax框架
使用了Vue后,ajax部分你可以做如下选择:
1.使用JS原生XHR接口
2.引入JQuery或者Zepto 使用$.ajax();
3.Vue的github上提供了vue-resource插件 :
4.使用 fetch.js
5.自己封装一个ajax库
上述就是小编为大家分享的vue中如何发送ajax请求了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。