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>Salin selepas log masuk
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();
Salin selepas log masuk
(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)
});Salin selepas log masuk
(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>Salin selepas log masuk
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>Salin selepas log masuk
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>Salin selepas log masuk
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>Salin selepas log masuk
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
