Vue 要实现异步加载需要使用到 vue-resource 库
这个大家直接引用就行了
[HTML] 纯文本查看 复制代码 <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
Get 请求以下是一个简单的 Get 请求实例,请求地址是一个简单的 txt 文本: [JavaScript] 纯文本查看 复制代码 window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
msg:'Hello World!',
},
methods:{
get:function(){
//发送get请求
this.$http.get('/try/ajax/ajax_info.txt').then(function(res){
document.write(res.body);
},function(){
console.log('请求失败处理');
});
}
}
});
} 如果需要传递数据,可以使用 this.$http.get('get.php',jsonData) 格式,第二个参数 jsonData 就是传到后端的数据。 [JavaScript] 纯文本查看 复制代码 this.$http.get('get.php',{a:1,b:2}).then(function(res){
document.write(res.body);
},function(res){
console.log(res.status);
}); post 请求post 发送数据到后端,需要第三个参数 {emulateJSON:true}。 emulateJSON 的作用: 如果Web服务器无法处理编码为 application/json 的请求,你可以启用 emulateJSON 选项 [JavaScript] 纯文本查看 复制代码 window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
msg:'Hello World!',
},
methods:{
post:function(){
//发送 post 请求
this.$http.post('/try/ajax/demo_test_post.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
document.write(res.body);
},function(res){
console.log(res.status);
});
}
}
});
} |