<script>
$(function(){
var sCurriculum="" ;//创建一个新的为空的字符串变量用来给里面赋值(命名尽量与dom元素名称对应)
//请求课程列表数据
$.ajax({
url:"http://39.101.217.150:8075/course/list",
//请求方式为默认的get,可以不用写
data:{ //data给后端传递参数
page:1,
size:12
},
success:function(data){ //sucess为后端传给我们的数据如data
var records=data.data.records; //records为数组
//接下来对这个records数组进行遍历
$.each(records,function(index,item){
//再让其空字符串变量等于dom的盒子结构,把后端数据放入盒子
sCurriculum+=`<div class="swiper-slide">
<h2 class='title'>Node.Js</h2>
<p class="explain">零基础入门到实战</p>
<p class='author'>讲师:老张</p>
<p class='time'>课程时间:2018-03-13/18:00</p>
<p class='introduce'>用于用户构建Jaccascript</p>
<div class='study'></div>
</div>`
//放入dom盒子后就把后端数据传过来进行修改,让数据变活
})
$("#swiperWrapper").append(sCurriculum);//再把字符串添加进盒子,让其显示在dom上,注意dom要用#号id名
//swiper部分,注意这部分要放进success部分里
var swiper = new Swiper(".mySwiper", {
loop:true,
slidesPerView: 4,
spaceBetween: 30,
effect: 'coverflow',
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
console.log(data.data.records);
}
})
})
</script>
这里为什么要 $("#swiperWrapper").append(sCurriculum);和swiper部分放进sucess后端部分里面
相关作者
- 获取点赞0
- 文章阅读量9
评论()