Question

我第一次尝试使用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;
            });
        }
    });
}

Answer 1

在您的成功函数中，您尝试迭代folderName（未定义），您应该迭代data。另外我认为您应该将li添加到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);
        });
    }

Answer 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;

此代码将进入成功回调

Answer 3

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

在<ul>的每次迭代中，您正在覆盖$.each标记中的任何内容。

相反，你应该使用这样的东西：

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

Ajax带回JSON并使用innerhtml

3 个答案: