Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan ajax dalam vuejs

Bagaimana untuk menggunakan ajax dalam vuejs

青灯夜游asal: 2021-09-22 15:56:553401semak imbas

Kaedah: 1. Pasang dan perkenalkan axios, dan gunakan "axios([option])", "axios.get(url[,...])" dan kaedah lain untuk menghantar permintaan. 2. Pasang dan perkenalkan vue-resource, dan gunakan "this.$http.jsonp(url,[...])" untuk menghantar permintaan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Vue sendiri tidak menyokong penghantaran permintaan AJAX, dan perlu dilaksanakan menggunakan pemalam seperti vue-resource dan axios.

axios ialah klien permintaan HTTP berasaskan Promise, digunakan untuk menghantar permintaan secara rasmi juga oleh vue2.0 Pada masa yang sama, vue-resource tidak akan dikemas kini dan diselenggara.

Cara menggunakan ajax dengan vuejs

1 Pasang axios dan import

1) npm Cara: npm pasang axios -S

2) Cara bower: bower pasang axios

3) Cara cdn: <script src="%E2%80%9Dhttps://unpkg.com/axios/dist/axios.min.js%E2%80%9D"></script>

2 Penggunaan

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>

Bagaimana untuk menggunakan ajax dalam vuejs
2) axios.get(url[,options]);

Kaedah hantaran parameter:
(1) Lulus parameter axios('url?key=value&key1=val2').then();
(2) Lulus parameter axios(' melalui params url pilihan',{params:{key:value}}).then();

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

Apabila axios menghantar data secara lalai, format data ialah Request Payload, yang bukan format Data Borang yang biasa digunakan
Oleh itu, parameter mesti dihantar dalam bentuk pasangan nilai kunci dan tidak boleh dihantar dalam bentuk json. .

Kaedah lulus parameter:

(1) Sambungkan ke dalam pasangan nilai kunci sendiri

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

(2) Gunakan transformRequest sebelum menghantar request Tukar data permintaan

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) Jika anda menggunakan pembangunan modular, anda boleh menggunakan modul qs untuk menukar

axios sendiri tidak menyokong penghantaran silang -permintaan data domain, tiada API yang sepadan disediakan dan pengarang tidak bercadang untuk menambah sokongan untuk menghantar permintaan merentas domain dalam axios
Jadi kami hanya boleh menggunakan perpustakaan pihak ketiga

. Permintaan merentas domain (Gunakan vue-resource untuk menghantar permintaan merentas domain)

Langkah untuk menggunakan sumber vue untuk menghantar merentas domain permintaan

Pasang vue -resource dan diperkenalkan: npm install vue-resource -S
Penggunaan asas:

Gunakan ini .$http.jsonp(url,[ops]) untuk menghantar permintaan

2. Demonstrasi penggunaan asas (carian 360)

1) Buka 360 cari, dan kemudian masukkan aksara 'a' dan beberapa pilihan carian akan digesa secara automatik, seperti Rajah
Bagaimana untuk menggunakan ajax dalam vuejs
2) Salin pautan
https://sug.so.360.cn/ suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
3) Demonstrasi kod

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

Bagaimana untuk menggunakan ajax dalam vuejsBagaimana untuk menggunakan ajax dalam vuejs

3. Contoh demonstrasi asas (carian Baidu)

1) Keperluan adalah sama dengan keperluan carian 360

Bagaimana untuk menggunakan ajax dalam vuejs
2 ) Salin pautan
=1526436420943”>https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/ su?wd=a&json=1&p=3&sid=1467_21117_2092&csors=10927&csor 02784707_1526436420940&=1526436420943
3) Demonstrasi Kod ( Nota) – Cuba Pertama
Jika anda menulisnya mengikut kod di atas, hasilnya akan menjadi ralat

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

Hasilnya akan menjadi ralat

百度搜过Bagaimana untuk menggunakan ajax dalam vuejs报错
Kemudian mengapa ini?

Nama parameter panggilan balik 360 search jsonp ialah panggilan balik Nama parameter yang digunakan oleh Baidu ialah cb, jadi ralat akan dilaporkan

Kod yang diubah suai adalah seperti berikut

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

Bagaimana untuk menggunakan ajax dalam vuejsBagaimana untuk menggunakan ajax dalam vuejs

Demonstrasi kes carian Baidu

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bagaimana untuk menggunakan ajax dalam vuejs列表</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>

Cadangan berkaitan: "tutorial vue.js"

Atas ialah kandungan terperinci Bagaimana untuk menggunakan ajax dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

json ajax vue.js npm Resource format JS this promise http https word

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Apakah perbezaan antara react dan vuejsArtikel seterusnya：Apakah perbezaan antara react dan vuejs

Artikel berkaitan

Lihat lagi