javascript - 怎么获取ajax里的变量

Question

我这里用ajax获取数据，然后在success里给他加了一个效果var nav，
不过在外面要调用这个nav，要怎么弄，把var nav弄成全局的也没用

$.ajax({
    type: "get",
    url: "nav.php",
    cache: false,
    dataType: "json",
    success: function(data) {
        var data = data;
        var html = '';
        for (var i = 0; i < data.length; i++) {
            html += '<p class="swiper-slide" data-hash="' + data[i].datahash + '">' + data[i].nav + '</p>';
        }
        $(".swiper-nav .swiper-wrapper").get(0).innerHTML = html;
        var nav = $('.swiper-nav').swiper({
            slidesPerView: 'auto',
            freeMode: true,
            noSwiping: true,
            freeModeFluid: true,
            calculateHeight: true,
            visibilityFullFit: true,
            onSlideClick: function(nav) {
            pages.swipeTo(nav.clickedSlideIndex)
            }
         })
      },
        error: function() {
                        alert("出错");
        }
    });

    function fixPagesHeight() {
        $('.swiper-pages').css({
                height: $(window).height() - nav.height - 48
        })
    }

   fixPagesHeight();

Answer 1

设置成 同步执行 async:false 试一下~

Answer 2

$.ajax()和fixPagesHeight()是顺序执行的
而ajax是一个异步调用，在ajax的success方法执行前你是拿不到值的，即使你设置全局变量都是没用
$(".swiper-nav .swiper-wrapper")中的html不是你所期望的

可以在这样修改

function fixPagesHeight() {
        $.ajax({
    type: "get",
    url: "nav.php",
    cache: false,
    dataType: "json",
    success: function(data) {
        var data = data;
        var html = '';
        for (var i = 0; i < data.length; i++) {
            html += '<p class="swiper-slide" data-hash="' + data[i].datahash + '">' + data[i].nav + '</p>';
        }
        $(".swiper-nav .swiper-wrapper").get(0).innerHTML = html;
        var nav = $('.swiper-nav').swiper({
            slidesPerView: 'auto',
            freeMode: true,
            noSwiping: true,
            freeModeFluid: true,
            calculateHeight: true,
            visibilityFullFit: true,
            onSlideClick: function(nav) {
            pages.swipeTo(nav.clickedSlideIndex)
            }
         });
         
        
        fixPagesHeight(nav);
        
      },
        error: function() {
                        alert("出错");
        }
    });
        
    }

 

或者

$.ajax({
    type: "get",
    url: "nav.php",
    cache: false,
    dataType: "json",
    success: function(data) {
        var data = data;
        var html = '';
        for (var i = 0; i < data.length; i++) {
            html += '<p class="swiper-slide" data-hash="' + data[i].datahash + '">' + data[i].nav + '</p>';
        }
        $(".swiper-nav .swiper-wrapper").get(0).innerHTML = html;
        
         fixPagesHeight();
        
      },
        error: function() {
                        alert("出错");
        }
    });
    
    function fixPagesHeight(){
    
    var nav = $('.swiper-nav').swiper({
        slidesPerView: 'auto',
        freeMode: true,
        noSwiping: true,
        freeModeFluid: true,
        calculateHeight: true,
        visibilityFullFit: true,
        onSlideClick: function(nav) {
        pages.swipeTo(nav.clickedSlideIndex)
        }
     });
     
     $('.swiper-pages').css({
                height: $(window).height() - nav.height - 48
        })
            
        }
        
        

Answer 3

这个是真实代码运行顺序么？ajax执行没有完毕后你就调用nav.height了？当然没有。
建议你直接在ajax 成功后去取$('.swiper-nav').height()的值来做页面的高度。

Answer 4

在全局的地方初始化下这个变量 var nav=null;在ajax回调函数里面 前面这样写 nav=result.data; 注意前面不远加var

Answer 5

我觉得在外面先初始化nav的Swiper，可以先将Swiper隐藏，再成功ajax之后更新Swiper，Swiper里面有个update方法的。

Answer 6

不知道楼主是不是只是随手写的，我提一个与问题无关的建议
楼主可以这么写

function get(url, callback) {
    $.ajax({
        type: "get",
        url: url,
        success: callback,
        .....
    })
}

然后写一个函数作为参数，传给get
只是一个小建议，哈哈~