本文介绍了如何在Vue.js应用中结合Zepto.js库进行Ajax请求，以获取并渲染商品数据。首先，通过引入Zepto.min.js文件，然后在Vue实例的方法中设置Ajax请求，获取JSON数据。成功回调中，将数据分别赋值给Vue实例的数据属性，实现商品列表的渲染。最后，通过setTimeout模拟延迟加载，调用初始化方法。
1、接口数据格式
image.png
2、zepto.min.js ajax请求
(1)引入zepto.min.js
(2)ajax请求
var slide = null;
var vm = new Vue({
el: '#app',
data: {
ads1_list: [],
ads2_list: [],
goods_list: []
},
methods: {
init: function () {
$.ajax({
type:'GET',
url: index_url,
data: {
},
dataType: 'json',
timeout: 300,
async: true, //所有请求均为异步。如果需要发送同步请求
cache: false, //浏览器是否应该被允许缓存GET响应。
context: $('body'),
success: function (ret) {
console.log(JSON.stringify(ret));
},
error: function () {
alert('Ajax error!')
}
})
}
},
});
3、检测效果
image.png
4、数据渲染
var slide = null;
var vm = new Vue({
el: '#app',
data: {
ads1_list: [],
ads2_list: [],
goods_list: []
},
//zepto.js ajax请求方法
methods: {
init: function () {
$.ajax({
type:'GET',
url: index_url,
data: {
},
dataType: 'json',
timeout: 300,
async: true, //所有请求均为异步。如果需要发送同步请求
cache: false, //浏览器是否应该被允许缓存GET响应。
context: $('body'),
success: function (ret) {
vm.ads1_list = ret.data.ads1_list;
vm.ads2_list = ret.data.ads2_list;
vm.goods_list = ret.data.goods_list;
console.log(JSON.stringify(vm.ads1_list));
console.log(JSON.stringify(vm.ads2_list));
console.log(JSON.stringify(vm.goods_list));
},
error: function () {
alert('Ajax error!')
}
})
}
},
});
setTimeout(function () {
vm.init();
},500)
html
平台推荐
商品
{{ vo.goods_name }}
扫一扫
1512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
