登录  /  注册

vuejs怎么用ajax

青灯夜游
发布: 2021-09-22 15:56:55
原创
3102人浏览过

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

vuejs怎么用ajax

本教程操作环境: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的方式:<script src="%E2%80%9Dhttps://unpkg.com/axios/dist/axios.min.js%E2%80%9D"></script>

2、基本用法

1)axios([options])

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>axios发送ajax请求基本用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="send">发送ajax请求</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            methods:{
                send(){
                    axios({
                       method:&#39;get&#39;,
                        url:&#39;user.json&#39;
                    }).then(function(res){
                        console.log(res.data.name);
                    });
                }
            }
        });
    </script>
</body>
</html>
登录后复制

结果
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(&#39;url&#39;,data,{
                        transformRequest:[
                                function(data){
                                    let params = &#39;&#39;;
                                    for(let index in data){
                                        params +=index+&#39;=&#39;+data[index]+&#39;&&#39;;
                                    }
                                    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’会有一些搜索选项自动提示,如图
360搜索
2)复制链接
https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
3)代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用vue-resource发送跨域请求</title>
    <!--引入vue、vue-resource文件-->
    <script src="vue.min.js"></script>
    <script src="vue-resource.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="sendJsonp">send</button>
    </div>
    <script>
            var vm = new Vue({
                el:"#app",
                methods:{
                    sendJsonp:function(){
                        this.$http.jsonp(&#39;https://sug.so.360.cn/suggest&#39;,{
                            params:{
                                word:&#39;a&#39;
                            }
                        }).then(function(res){
                            console.log(res.data);
                        });
                    }
                }
            });
    </script>
</body>
</html>
登录后复制

4)结果

360搜索结果

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

1)要求同360搜索的要求

百度搜索
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)代码演示(注意)–第一次尝试
如果按照上述代码的方式去写,那结果会报错

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用vue-resource发送跨域请求</title>
    <!--引入vue、vue-resource文件-->
    <script src="vue.min.js"></script>
    <script src="vue-resource.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="sendJsonp">send</button>
    </div>
    <script>
            var vm = new Vue({
                el:"#app",
                methods:{
                    sendJsonp:function(){  
               this.$http.jsonp(&#39;https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su&#39;,{
                            params:{
                                wd:&#39;a&#39;
                            }
                        }).then(function(res){
                            console.log(res.data);
                        });
                    }
                }
            });
    </script>
</body>
</html>
登录后复制

结果会报错

百度搜过结果报错
那这是为什么呢?

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

修改过后的代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用vue-resource发送跨域请求</title>
    <!--引入vue、vue-resource文件-->
    <script src="vue.min.js"></script>
    <script src="vue-resource.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="sendJsonp">send</button>
    </div>
    <script>
            var vm = new Vue({
                el:"#app",
                methods:{
                    sendJsonp:function(){
         this.$http.jsonp(&#39;https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su&#39;,{
                            params:{
                                wd:&#39;a&#39;
                            },
                            jsonp:&#39;cb&#39;
                        }).then(function(res){
                            console.log(res.data);
                        });
                    }
                }
            });
    </script>
</body>
</html>
登录后复制

4)结果

百度搜索结果

4、百度搜索案例演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度搜索列表</title>
    <style>
        .current{
            background-color:#CCCCCC;
        }
    </style>
    <!--引入vue、vue-resource文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.0"></script>
</head>
<body>
    <script>
    window.onload=function() {
        new Vue({
            el: "#app",
            data: {
                keyword: &#39;&#39;,
                myData:[],
                now: -1
            },
            methods: {
                getData(e) {
                    //如果按方向键上、下,则不发请求
                    if (e.keyCode == 38 || e.keyCode == 40)
                        return;
                    this.$http.jsonp(
                    &#39;https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su&#39;, {
                        params: {
                            wd: this.keyword
                        },
                        jsonp: &#39;cb&#39;
                    }).then(function (res) {
                        console.log(res.data.s);
                        this.myData = res.data.s;
                    });
                },
                changeDown() {
                    this.now++;
                    this.keyword = this.myData[this.now];
                    if (this.now == this.myData.length) {
                        this.now = -1;
                    }
                },
                changeUp() {
                    this.now--;
                    this.keyword = this.myData[this.now];
                    if (this.now == -2) {
                        this.now = this.myData.length - 1;
                    }
                }
            }
        });
    }
    </script>
    <div id="app">
        <input type="text" v-model="keyword"  
               @keyup="getData($event)" @keydown.down="changeDown"  
               @keydown.up.prevent="changeUp"
        />
        <ul>
            <li v-for="(val,index) in myData" :key="index"  
                               :class="{current:index==now}"
            >
                {{val}}
            </li>
        </ul>
    </div>
</body>
</html>
登录后复制

相关推荐:《vue.js教程

以上就是vuejs怎么用ajax的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号