vuejs怎麼用ajax

青灯夜游原創: 2021-09-22 15:56:553288瀏覽

方法：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></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>

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(&#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、基本使用演示（vuejs怎麼用ajax）

1）打開vuejs怎麼用ajax，然後輸入字符'a'會有一些搜索選項自動提示，如圖

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）結果

vuejs怎麼用ajaxvuejs怎麼用ajax

#3、基本範例示範（百度搜尋）

1）要求同360搜尋的要求

vuejs怎麼用ajax
2）複製連結
=1526436420943」>https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/suwd=a&json 1&p=3&sid=1467_21117_20927&req=2&csor=1&cb=jQuery1102060305102784707_1526436420940&=1526436420943 #1201126436420943264364209320940&=1526436420943）

<!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>

結果會報錯

那這是為什麼呢？百度搜过vuejs怎麼用ajax报错

之前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）結果

vuejs怎麼用ajaxvuejs怎麼用ajax

4、百度搜尋案例示範

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vuejs怎麼用ajax列表</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>

vuejs怎麼用ajax

相關文章