jquery

收藏
<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

相关文章

联系小鹿线

咨询老师

咨询老师

扫码下载APP