vue不支持直接发送AJAX请求,需要使用vue-resource、axios等插件实现。首先需要引入 vue.js,vue-resource.js
<script src="../js/vue.js"></script>
<script src="../js/vue-resource.min.js"></script>
下面是链接
https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js
https://cdn.staticfile.org/vue/2.2.2/vue.min.js
get请求
this.$http.get('/try/ajax/ajax_info.txt').then(function(res){
document.write(res.body);
},function(){
console.log('请求失败处理');
});
如果加参数
this.$http.get('get.php',{params : jsonData})
post请求
//选考科目的可选项
listXkkm: function () {
var url = baseURL + '/f/api/v1/zsxc/kaoshengInfo/listXkkm'
//发送 post 请求
this.$http.post(url, { emulateJSON: true }).then(function (res) {
this.touristList = res.data.data
});
},
加参数
this.$http.post('/try/ajax/demo_test_post.php',{name:"111",sex:"1"},{emulateJSON:true})
使用 vue-resource 的 jsonp 处理跨域请求
<div id="app">
请输入关键字:<input type="text" v-model="keyword" @keyup="sendJsonP(keyword)">
<ul>
<li v-for="r in result">{{r}}</li>
</ul>
</div>
<script>
window.onload = function () {
new Vue({
el: '#app',
data: {
keyword: '',
result: ''
},
methods: {
sendJsonP(keyword) {
let url = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web';
this.$http.jsonp(url, {
params: {
wd: keyword
},
jsonp: 'cb'//jsonp默认是callback,百度缩写成了cb,所以需要指定下 }
}).then(res => {
if (res.data.g) {
this.result = res.data.g.map(x => x['q']);
} else {
this.result = [];
}
});
}
}
});
}
</script>