Ajax 不使用 owl-carousel

Question

我在我的页面中实现 ajax 时遇到了问题，其中 owl-carousel 她是代码：

控制器：

 public int Getmembers()
    {

        return db.Teams.Count();

        }
    }

风景 ：

<script>
$(document).ready(function () {
                        var json = null;
                        $.ajax({
                            url: '@Url.Action("Getmembers", "Home")',
                            type: "GET",
                            dataType: "int",
                            success: function (data) {
                                json = data;

                            },
                            error: function () {
                                alert("Erreur de récupération des membres ou il n'existe aucun memnbre");
                            }

                        })
                        alert(json);
                        var owl = $("#owl-demo");

                        owl.owlCarousel({
                            items: json, //10 items above 1000px browser width
                            itemsDesktop: [1000, 5], //5 items between 1000px and 901px
                            itemsDesktopSmall: [900, 3], // betweem 900px and 601px
                            itemsTablet: [600, 2], //2 items between 600 and 0
                            itemsMobile: false, // itemsMobile disabled - inherit from itemsTablet option
                            pagination: false

                        });


                    });
</script>

我尝试调试，我发现在 $.ajax 中传递了 json 的值（一个 int 13）但是当我使用 alert 我得到 null 时，我在文档中搜索得到了这个http://www.jq22.com/demo /OwlCarousel2/demos/ajax.html但仍然没有任何线索。

Answer 1

您的 ajax 调用是异步的，这意味着它将在您的 owl carousel 初始化后执行成功方法。

将轮播的 init 方法放入成功方法中：

    $(document).ready(function () {
    var json = null;
    $.ajax({
        url: '@Url.Action("Getmembers", "Home")',
        type: "GET",
        dataType: "int",
        success: function (data) {
            var owl = $("#owl-demo");

            owl.owlCarousel({
                items: data, //10 items above 1000px browser width
                itemsDesktop: [1000, 5], //5 items between 1000px and 901px
                itemsDesktopSmall: [900, 3], // betweem 900px and 601px
                itemsTablet: [600, 2], //2 items between 600 and 0
                itemsMobile: false, // itemsMobile disabled - inherit from itemsTablet option
                pagination: false

            });

        },
        error: function () {
            alert("Erreur de récupération des membres ou il n'existe aucun memnbre");
        }

    });
});