Question

当您按下按钮时，我使用AJAX将更多文章添加到文章列表中。所以我的AJAX调用返回包含标题，作者和与文章相关的1到3个图像的数据。下面是我用来输出它的代码，但感觉非常笨重。

在这样的场景中，使用JavaScript / jQuery打印HTML的最佳做法是什么？我需要添加许多带有新信息的新标签？谢谢您的帮助！

另外，我知道有些代码编写得不是很好，因为它只是为了让内容有效而成为初稿，所以请只回答关于打印HTML或者将要编写的内容的问题。使打印更容易HTML

$j.getJSON(ajaxurl, {action: 'load_articles', issues: $issues}, function(data) {
    if (data.message != null) {
        alert(data.message);
        return
    }
    list = $j('.all-articles ul');
    for (i in data.articles) {
        article = data.articles[i];
        //Hides articles already on page
        if ($j("#" + article.id).size() === 0) {
            list.append('<li class="article-preview" id="' + article.id + '">' +
                    '<h3 class="article-headline">' + article.title + '</h3>' +
                    '</li>');
            current = $j("#" + article.id)
            current.append('<p class="authors"></p>');
            authors = $j("#" + article.id + " .authors")
            for (a in article.authors) {
                authors.append(article.authors[a].data.display_name + " ");
            }
            current.append('<div class="images"></div>');
            images = $j("#" + article.id + " .images")
            for (i in article.image) {
                text = "<div class='image-expand-container'>";
                if (i == 0) {
                    text += ('<img id="' + article.image[i].id + '"class="selected" src="' + article.image[i].medium + '"></img>');
                }
                else {
                    text += ('<img id="' + article.image[i].id + '" src="' + article.image[i].medium + '"></img>');
                }
                text += '<div class="dashicons dashicons-editor-expand"></div></div>';
                images.append(text);
            }
        }
    }

Answer 1

您可以采取一些方法。

正如您在此处所做的那样，您可以从ajax调用中返回数据（例如，作为JSON），然后使用javascript函数通过构建字符串来生成相应的HTML。正如您所发现的那样，这通常很麻烦。
您可以在服务器端生成实际的HTML，并让ajax调用返回一个HTML片段，然后将其插入到DOM中。这样做的好处是，如果你的某些HTML在页面加载时加载，而某些HTML是通过ajax加载的，你可以使用相同的方法（PHP，XSLT，ASP.NET Razor，任何类型的服务器端模板）来生成所有HTML。
您可以使用javascript templating框架将您的JSON数据转换为HTML。如果您的所有HTML都是通过javascript生成的（例如在单页应用程序中），这可能是您最好的选择。

将数据从AJAX调用输出到HTML

1 个答案: