Ajax帶回JSON並使用innerhtml

我第一次嘗試使用JSON從我的數據庫中取回結果。我可以帶回這樣的結果：Ajax帶回JSON並使用innerhtml

[{"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; 
      }); 
     } 
    }); 
}

來源

2015-11-07 A Lower

在你成功的功能您嘗試遍歷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); 
     }); 
    }

來源

2015-11-07 21:39:11 Musa

謝謝（和其他人）：

相反，你應該使用這樣的事情。似乎無法讓它工作，雖然有任何答覆。我的「msgbox」html甚至不顯示在屏幕上，這很奇怪。當我檢查元素時，它在那裏，但在查看頁面時什麼都沒有。 –

您需要遍歷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;

該代碼會去的成功回調

來源

2015-11-07 21:41:12

謝謝。我遇到了「list + =」位的問題，表示「期待」，「」 –

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

您將要覆蓋無論是在內部<ul>標記每次迭代$.each。爲您回覆

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

來源

2015-11-07 21:42:53 jconder

Ajax帶回JSON並使用innerhtml

回答

相關問題