Maison > Article > interface Web > Comment utiliser ajax dans vuejs
Comment utiliser ajax dans vuejs
- 青灯夜游original
- 2021-09-22 15:56:553291parcourir
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.
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:'get',
url:'user.json'
}).then(function(res){
console.log(res.data.name);
});
}
}
});
</script>
</body>
</html>
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();
(2) Utilisez transformRequest pour convertir les données de la demande avant d'envoyer la demande
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) 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 :
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 
https://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('https://sug.so.360.cn/suggest',{
params:{
word:'a'
}
}).then(function(res){
console.log(res.data);
});
}
}
});
</script>
</body>
</html>4) Résultats
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 
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('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:'a'
}
}).then(function(res){
console.log(res.data);
});
}
}
});
</script>
</body>
</html>Le résultat sera une erreur
Alors pourquoi ça ?
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
4) RésultatLe 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('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ params:{ wd:'a' }, jsonp:'cb' }).then(function(res){ console.log(res.data); }); } } }); </script> </body> </html>
4. 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: '',
myData:[],
now: -1
},
methods: {
getData(e) {
//如果按方向键上、下，则不发请求
if (e.keyCode == 38 || e.keyCode == 40)
return;
this.$http.jsonp(
'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
params: {
wd: this.keyword
},
jsonp: 'cb'
}).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>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!
Articles Liés
Voir plus- Vous apprendre étape par étape comment utiliser le code Vue2 pour passer à Vue3 (explication détaillée de l'image et du texte)
- Comment passer à une autre page dans vue
- Comment annuler le bouillonnement dans vuejs
- Que faire si la requête vuejs ne parvient pas à transmettre les paramètres
- Comment supprimer des attributs dans vuejs