留言板功能—jQuery解析json並加載到HTML

$().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); 
	}
下面是效果圖:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章