将 AJAX 调用中的数据输出到 HTML

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

您可以采取几种方法。

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