Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan ajax dalam vuejs
Bagaimana untuk menggunakan ajax dalam vuejs
- 青灯夜游asal
- 2021-09-22 15:56:553414semak 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:'get',
url:'user.json'
}).then(function(res){
console.log(res.data.name);
});
}
}
});
</script>
</body>
</html>
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('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) 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
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('https://sug.so.360.cn/suggest',{
params:{
word:'a'
}
}).then(function(res){
console.log(res.data);
});
}
}
});
</script>
</body>
</html>4) Keputusan
3. Contoh demonstrasi asas (carian Baidu)
1) Keperluan adalah sama dengan keperluan carian 360
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('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:'a'
}
}).then(function(res){
console.log(res.data);
});
}
}
});
</script>
</body>
</html>Hasilnya akan menjadi ralat
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('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:'a'
},
jsonp:'cb'
}).then(function(res){
console.log(res.data);
});
}
}
});
</script>
</body>
</html>4) Keputusan
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: '',
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>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!
Artikel berkaitan
Lihat lagi- Ajar anda langkah demi langkah cara menggunakan kod Vue2 untuk menukar kepada Vue3 (penjelasan terperinci dengan gambar dan teks)
- Bagaimana untuk melompat ke halaman lain dalam vue
- Bagaimana untuk membatalkan gelembung dalam vuejs
- Perkara yang perlu dilakukan jika pertanyaan vuejs gagal lulus parameter
- Bagaimana untuk memadamkan atribut dalam vuejs