Question

我想知道如何通过使用jQuery Ajax显示我的JSON对象的前五项，如果单击按钮#load，每次都会加载5次。如果没有if(i <= 4){}语句，JSON对象的所有项都将加载到页面中。

使用if语句，它向我显示JSON的对象的第一个。我正在尝试创建一个单击事件，如果单击该按钮，会将布尔值load more切换为true，但我不知道如何进一步实现此目的。另外，我想添加滚动页面以加载内容的支持..

$.ajax({
            url: 'api/videoData.js',
            dataType: 'json',
            success: function(data) {
                // console.log(data); //uncomment this for debug
                // root.dataArr = data;
                Triptube.dataController.timelineEvents(data);

                var index = 0;
                var loadmore = false;
                var el = $('.featured'); // .featured

                $.get('directives/format-text.html', function(response){
                    console.log('succes');
                })

                .done(function (response) {
                    // console.dir(response);

                    var raw_model = response;

                    for (var i = 0; i < raw_model.length; i++) {

                        if (i <= 4) {
                            model = $(raw_model);
                            model.find('h4').html(data.content[i].subtitle);
                            model.find('h3').html(data.content[i].title);
                            model.find('p').html(data.content[i].text);
                            $('.featured').append(model);
                        }

                        if (loadmore) {
                            console.log('Clicked');
                            loadmore = false;
                        }

                    }

                    $('#loadmore').click(function(e) {
                        e.preventDefault();
                        loadmore = true;
                    });

                })

                .fail(function (response) {
                    console.dir(response);                  
                });


            },

            error: function(data) { 
                console.log(data);
                console.log('Houston, we have a problem!');
            }


        });

JSON文件：

{
    "title":    "London",
    "category": "The Ultimate",
    "image":    "images/content/londen.jpg",
    "website":  "http://www.london.nl/",
    "youtube":  "https://www.youtube.com/watch?v=Sq9rjbouBlY&t=23",
    "maps":     "https://www.google.nl/maps/place/Londen,+Verenigd+Koninkrijk/@51.5114089,-0.1271477,13.79z/data=!4m2!3m1!1s0x47d8a00baf21de75:0x52963a5addd52a99",
    "content":  [
        {
            "type" :        "normal",
            "timeTrigger":  24,
            "title":        "London Eye",
            "subtitle":     "Algemene",
            "picture" :     "images/content/london.jpg",
            "text":         "This is the London Eye",
            "readmore":     "http://wikitravel.org/en/London"
        },{
            "type":         "normal",
            "timeTrigger":  24,
            "title":        "Sherlock Holmes",
            "subtitle":     "Detective",
            "picture" :     "images/content/sherlock_holmes.jpg",
            "text":         "Sherlock Holmes is een fictieve detective  <br> uit de verhalen van de laat-19de-eeuwse",
            "readmore":     "http://nl.wikipedia.org/wiki/Sherlock_Holmes"
        },{
            "type":         "normal",
            "timeTrigger":  39,
            "title":        "Fish \"n Chips",
            "subtitle":     "Eten",
            "picture" :     "images/content/sherlock_holmes.jpg",
            "text":         "Fish and chips is een typisch Britse afhaalmaaltijd .",
            "readmore":     "http://youngandfoodish.com/london/top-10-fish-and-chips-in-london/"
        }
    ]
}

请留意一些建议。提前谢谢。

如何使用jQuery Ajax加载JSON目标？

0 个答案: