Ajax 带回 JSON 并使用 innerhtml答案

【问题标题】：Ajax bringing back JSON and using innerhtmlAjax 带回 JSON 并使用 innerhtml
【发布时间】：2015-11-07 21:30:40
【问题描述】：

我第一次尝试使用 JSON 从我的数据库中取回我的结果。我可以带回这样的结果：

[{"folderName": "Inbox", "MessageType": "AV"},
{"folderName": "Sent", "MessageType": "AV"},
{"folderName": "Deleted", "MessageType": "AV"}]

但它根本不显示在浏览器中。我检查了元素，id=liststart 里面没有 li。

function showMessages(id) {
    var msgbox = ('<div class="row"><div class="col-md-3"><a href="compose.html" class="btn btn-primary btn-block margin-bottom">Compose</a><div class="box box-solid"><div class="box-header with-border">' +
        '<h3 class="box-title">Folders</h3><div class="box-tools"><button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button></div></div><div class="box-body no-padding">' +
        '<ul id="liststart" class="nav nav-pills nav-stacked"></ul></div></div></div></div>');
    document.getElementById("div_messages").innerHTML = msgbox;
    $.ajax({
        url: '/ajax/functiongrabber.asp?loadfunction=getfolders&id=' + encodeURI(id),
        async: false,
        dataType: "json",
        success: function (data) {
            $.each(folderName, function (i, item) {
                var list = ('<li class="active"><a href="#"><i class="fa fa-inbox"></i>' + folderName + '<span class="label label-primary pull-right">12</span></a></li>');
                document.getElementById("liststart").innerHTML = list;
            });
        }
    });
}

【问题讨论】：

标签： jquery json ajax innerhtml

【解决方案1】：

在您的成功函数中，您尝试迭代未定义的folderName，您应该迭代data。另外我认为您应该将lis 附加到ul 而不是使用innerHTML。

    success: function (data) {
        $.each(data, function (i, item) {
            var list = ('<li class="active"><a href="#"><i class="fa fa-inbox"></i>' + item.folderName + '<span class="label label-primary pull-right">12</span></a></li>');
            $("#liststart").append(list);
        });
    }

【讨论】：

感谢您的回复（以及其他所有人）。尽管有任何回复，但似乎无法使其正常工作。我的“msgbox”html 甚至没有显示在屏幕上，这很奇怪。当我检查元素时它就在那里，但在查看页面时什么都没有。

【解决方案2】：

您需要遍历 data 并每次添加到 html 中：

var list;
$.each(data, function(index, value){
    list += ('<li class="active"><a href="#"><i class="fa fa-inbox"></i>' + value.folderName + '<span class="label label-primary pull-right">12</span></a></li>');
})
document.getElementById("liststart").innerHTML = list;

此代码将进入成功回调

【讨论】：

谢谢。我遇到了“list +=”位的问题，说“期待'，'”

【解决方案3】：

document.getElementById("liststart").innerHTML = list;

$.each 的每次迭代都会覆盖 <ul> 标记中的任何内容。

相反，您应该使用如下内容：

var listEl = document.createElement('li');
listEl.innerHTML = list;
document.getElementById('liststart').appendChild(listEl);

【讨论】：