如何使用jQuery Ajax将数据从JSON添加到HTML

How to add data from JSON to HTML with jQuery Ajax?

本文关键字：JSON 添加 HTML 数据 何使用 jQuery Ajax      更新时间：2023-09-26

我想将数据从JSON对象添加到HTML标记。我使用jQuery和AJAX读取数据。我想要实现的是为JSON文件中的每个对象添加一个新的HTML标记，代表一个项目。

我使用以下代码从每个对象中添加text键。

$.ajax({
    url: 'api/videoData.js',
    dataType: 'json',
    success: function(data) {
        console.log(data); //uncomment this for debug
        for (var i = 0; i < data.content.length; i++) {
            if (data.content[i].type == 'normal') {
                console.log(data.content[i].text);
                $('.article.text').find('p').html(data.content[i].text);
            }
        };
    },
    error: function() { 
        console.log('Houston, we have a problem!');
    }
});

HTML标记:

<div class="article text">
    <span class="format text alignRight"></span>
    <h4>Subtitle</h4>
    <h3>Title</h3>
    <p>
        Paragraph text
    </p>
</div><!-- End div.article text -->
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/"
        }
    ]
}

它将console.log所有对象的所有文本，但它不会出现在我的HTML中

您应该使用append而不是html，因为:

当.html()被用来设置一个元素的内容时，任何内容在该元素中完全被新的内容所取代。

从jquery API: API .html()

你也可以使用jquery的each来代替for循环:API $ . each ()

在你的文章后面加上这样的标记:

<div id="articles"></div>

…ajax: 

$.ajax({
        url: 'api/videoData.js',
        dataType: 'json',
        success: function(data) {
            console.log(data); //uncomment this for debug
            Triptube.dataController.timelineEvents(data);
            //the element where the articles should be appended
            var el = $('#articles');
            //empty this element first
            el.empty();
            //you can use jquery each to append all new articles
            $.each(data.content, function(index, value) {
                if (value.type == 'normal') {
                    console.log(value.text);
                    //append every node instead of replacing it with your markup
                    el.append(
                       '<div class="article text">' +
                          '<span class="format text alignRight"></span>' +
                          '<h4>' + value.subtitle + '</h4>' + 
                          '<h3>' + value.title + '</h3>' +
                          '<p>' + value.text + '</p>' +
                       '</div>'
                    );
                }
            });
        },
        error: function() { // Moet deze ook een parameter hebben?
            console.log('Houston, we have a problem!');
        }
});
api:

API空虚

API .append ()

相关文章：