Comment utiliser ajax dans vuejs

青灯夜游
Libérer: 2023-01-11 09:21:48
original
3417 Les gens l'ont consulté

Méthode : 1. Installez et introduisez axios, et utilisez "axios([option])", "axios.get(url[,...])" et d'autres méthodes pour envoyer des requêtes. 2. Installez et introduisez vue-resource, et utilisez "this.$http.jsonp(url,[...])" pour envoyer la requête.

Comment utiliser ajax dans vuejs

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Vue lui-même ne prend pas en charge l'envoi de requêtes AJAX et vous devez utiliser vue-resource, axios et d'autres plug-ins pour l'implémenter.

axios est un client de requête HTTP basé sur Promise utilisé pour envoyer des requêtes. Il est également officiellement recommandé par vue2.0. En même temps, vue-resource ne sera plus mis à jour et maintenu.

Méthode vuejs d'utilisation d'ajax

1 Installez axios et présentez

1) méthode npm : npm install axios -S

2) méthode bower : bower install axios

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

2. Utilisation de base

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>
Copier après la connexion

Comment utiliser ajax dans vuejs
2) axios.get(url[,options]);

Méthode de transmission des paramètres :
(1) Passer les paramètres via l'url axios('url?key=value&key1=val2').then();
(2) Transmettre les paramètres via l'option params axios('url',{params:{key:value}}).then( );

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

Lorsque axios envoie des données par défaut, le format des données est Request Payload, qui n'est pas le format de données de formulaire couramment utilisé,
les paramètres doivent donc être en valeurs clés Pour le transfert de format, il ne peut pas être transféré au format json.

Méthode de transmission des paramètres :

(1) Coupez-le vous-même en paires clé-valeur

axios.post(‘url’,’key=value&key1=value1’).then();
Copier après la connexion

(2) Utilisez transformRequest pour convertir les données de la demande avant d'envoyer la demande

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)
                    });
Copier après la connexion

(3) Si vous utilisez le développement modulaire , Vous pouvez utiliser le module qs pour la conversion

axios lui-même ne prend pas en charge l'envoi de requêtes inter-domaines et ne fournit pas d'API correspondante. L'auteur n'a pas l'intention d'ajouter la prise en charge de l'envoi de requêtes inter-domaines dans axios,
donc. vous ne pouvez utiliser que des bibliothèques tierces

Demande inter-domaines (utilisez vue-resource pour envoyer une requête inter-domaines)

1.

Installez vue-resource et introduisez : npm install vue-resource -S
  • Utilisation de base :
Utilisez ceci.$http.jsonp(url,[ops]) pour envoyer une requête

2. démo d'utilisation (Recherche 360)

1) Ouvrez la Recherche 360 ​​et entrez les caractères « a » pour afficher automatiquement certaines options de recherche, comme indiqué dans l'image


2) Copiez le lien Comment utiliser ajax dans vuejshttps://sug.so.360 .cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word =a
3) Démonstration de code

<!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>
Copier après la connexion

4) Résultats

Comment utiliser ajax dans vuejsComment utiliser ajax dans vuejs

3.

1) Les exigences sont les mêmes que celles de la recherche 360 ​​

2) Copier le lien

= 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 Comment utiliser ajax dans vuejs 3) Démonstration de code (note) – essayez d'abord
Si si vous écrivez le code ci-dessus, le résultat sera une erreur

<!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>
Copier après la connexion

Le résultat sera une erreur

Alors pourquoi ça ?

百度搜过Comment utiliser ajax dans vuejs报错
Le nom du paramètre du rappel jsonp de recherche 360 ​​était callback, et le nom du paramètre utilisé par Baidu était cb , donc une erreur sera signalée

Le code modifié est le suivant

<!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>
Copier après la connexion
4) Résultat

Comment utiliser ajax dans vuejsComment utiliser ajax dans vuejs4. Démonstration du cas de recherche Baidu

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Comment utiliser ajax dans 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>
Copier après la connexion
Recommandations associées : "tutoriel vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal