$().ready(function() {
//獲取留言信息
getComment();
});
function getComment(){
$.ajax({
url : "../../CommentServlet?method=getComment&page_now=1&com_type=3",
dataType : "JSON",
success : function(data) {
// var json = jQuery.parseJSON(data);
//$("#myText").text(json);
$.each(data,function(i,va){//這是可以的
//alert(va["count_all"]);i爲data的索引,va爲該索引的對象。
//對象變量名[“屬性名”] 得到該對象下該屬性名的屬性值
var list = va["list"];
//寫一個存放所有評論的com_id的數組,用於後面和con_pid進行比較,如果相同,則說明,該評論有回覆,就加上回復的內容
$.each(list,function(p,va){// 1.這裏是先把沒有回覆內容的留言拿到
var com_id = va.com_pid;
if(com_id == ""){//沒有回覆
appendToDiv(va);//直接生成評論
}
});
$.each(list,function(p,va){
var com_id = va.com_pid;
if(com_id != ""){//2.在根據有pid(就是回覆留言的留言),然後根據pid來把這個內容追加到對應的留言內容裏
var html = jsonToHtml(va);
$("#"+com_id).children(".panel-body").append(html);
}
});
});
},
error : function() {
alert("ajax錯誤");
}
});
}
function jsonToHtml(va){
var html = "";
html = '<div class="panel panel-danger" id = "'+va.com_id+'">'+
//評論title和時間
'<div class="panel-heading">' +
'<h3 class="panel-title">' +
'<div id="show_name">' +
'<span class="glyphicon glyphicon-user" aria-hidden="true"></span>' +
'暱稱:' + va.com_name +
'<div style="float: right;" id ="show_time">Tiime:'+va.com_date+'</div>' +
'</div>' +
'</h3>' +
'</div>' +
//評論內容
'<div class="panel-body" id="show_content"><div id="show_other"></div> '+va.com_content+'</div>' +
//評論未
'<div class="panel-footer" align="left">' +
'<div align="right">' +
'<span class="glyphicon glyphicon-send" aria-hidden="true"></span>' +
'<small><button type="button" class="btn btn-sm" id="replay'+va.com_id+'" οnclick="replay('+va.com_id+');">回覆</button></small>' +
'</div>'+
'</div>'
'</div>';
return html;
}
function appendToDiv(va){
var html = jsonToHtml(va);
$("#show_comment").append(html);
}
下面是效果圖: