vuejs如何使用ajax

这篇文章主要为大家展示了“vuejs如何使用ajax”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vuejs如何使用ajax”这篇文章吧。

创新互联建站10多年企业网站制作服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,企业网站制作及推广,对成都建筑动画等多个方面拥有多年的网站制作经验的网站建设公司。

方法:1、安装并引入axios,用“axios([option])”、“axios.get(url[,...])”等方法发送请求。2、安装并引入vue-resource,用“this.$http.jsonp(url,[...])”发送请求。

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。

axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护。

vuejs使用ajax的方法

1、安装axios并引入

1)npm的方式:  npm install axios -S

2)bower的方式: bower install axios

3)cdn的方式:

2、基本用法

1)axios([options])




    
    axios发送ajax请求基本用法
    
    


    
        发送ajax请求
    
    

vuejs如何使用ajax
2)axios.get(url[,options]);

传参方式:
(1)通过url传参axios(‘url?key=value&key1=val2’).then();
(2)通过params选项传参 axios(‘url’,{params:{key:value}}).then();

3)axios.post(url,data,[options]);

axios默认发送数据时,数据格式是Request Payload,并非常用的Form Data格式,
所以参数必须要以键值对形式传递,不能以json形式传。

传参方式:

(1)自己拼接为键值对

axios.post(‘url’,’key=value&key1=value1’).then();

(2)使用transformRequest,在请求发送前将请求数据进行转换

axios.post('url',data,{
                        transformRequest:[
                                function(data){
                                    let params = '';
                                    for(let index in data){
                                        params +=index+'='+data[index]+'&';
                                    }
                                    return params;
                                }
                        ]
                    }).then(function(res){
                        console.log(res.data)
                    });

(3)如果使用模块化开发,可以使用qs模块进行转换

axios本身并不支持发送跨域的请求,没有提供相应的API,作者也暂没计划在axios添加支持发送跨域请求,
所以只能使用第三方库

跨域请求(使用vue-resource发送跨域请求)

1、使用vue-resource发送跨域请求步骤

  • 安装vue-resource并引入:npm install vue-resource -S

  • 基本用法:

使用this.$http.jsonp(url,[ops]) 发送请求

2、基本使用演示(360搜索)

1)打开360搜索,然后输入字符’a’会有一些搜索选项自动提示,如图
vuejs如何使用ajax
2)复制链接
https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
3)代码演示




    
    使用vue-resource发送跨域请求
    
    
    


    
        send
    
    

4)结果

vuejs如何使用ajax

3、基本例子演示(百度搜索)

1)要求同360搜索的要求

vuejs如何使用ajax
2)复制链接
=1526436420943”>https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1467_21117_20927&req=2&csor=1&cb=jQuery1102060305102784707_1526436420940&=1526436420943
3)代码演示(注意)–第一次尝试
如果按照上述代码的方式去写,那结果会报错




    
    使用vue-resource发送跨域请求
    
    
    


    
        send
    
    

结果会报错

vuejs如何使用ajax
那这是为什么呢?

之前360搜索jsonp回调的参数名是callback,而百度使用的参数名为cb,所以会报错

修改过后的代码如下




    
    使用vue-resource发送跨域请求
    
    
    


    
        send
    
    

4)结果

vuejs如何使用ajax

4、百度搜索案例演示




    
    百度搜索列表
    
    
    
    


    
    
        
        
                                 {{val}}                      
    

以上是“vuejs如何使用ajax”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享标题:vuejs如何使用ajax
文章转载:http://pwwzsj.com/article/pechhs.html

其他资讯