时间戳

首页 > 解决方案 > 在 ajax 响应中加载列表对象并使用此数据创建动态列表 div

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

问题描述

我有这部分 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 并从响应中填充其数据。我该怎么做？

标签： javascriptjqueryajaxtwitter-bootstrap

解决方案

遍历从 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>');
            }) 
        });
}

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

推荐阅读