javascript - 在ajax响应中加载列表对象并使用此数据创建动态列表div

Question

我有这部分 HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">{title}</h4>
                    <p class="card-text">{content}</p>
                    <a href="#" class="card-link">Read...</a>
                </div>
            </div>
        </div>
    </div>
</div>

我有 ajax 请求，该请求在页面加载后调用:

<script>
    $(window).on('load', function () {
        loadArticles();
    });

    function loadArticles() {
        $.ajax({
            dataType: "json",
            url: "/articles", success: function (result) {

            }
        });
    }
</script>

我需要使用响应中的数据创建卡片列表( <div class="card"> )。例如，我收到了 5 篇文章的回复。我需要创建 5 个卡片 div 并从响应中填充其数据。我该怎么做？

Answer 1

循环从 ajax 调用返回的对象，并使用 jQuery .append() 函数将它们添加到 dom。

首先，您需要向 HTML 中的父 div 添加标识类(或 id)，并删除卡片 HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-4 cards-wrapper"></div>
    </div>
</div>

然后在你的 loadArticles 函数中循环你的 ajax 响应并附加到我们刚刚定义的 jQuery 选择 - '.cards-wrapper':

function loadArticles() {
    $.ajax({
        dataType: "json",
        url: "/articles",
        }).done(function(data) {
            const cards = data.body.cards; // Or however you need to traverse the response object
            cards.forEach(function(card) {
                $('.cards-wrapper').append('<div class="card"><div class="card-body"><h4 class="card-title">' + card.title + '</h4><p class="card-text">' + card.content + '</p><a href="#" class="card-link">Read...</a></div></div>');
            }) 
        });
}

理想情况下，您应该将附加代码提取到其自己的函数中，以提高可读性等。