留言板功能—jQuery解析json并加载到HTML

最新推荐文章于 2025-03-20 16:59:52 发布

static_mkk

最新推荐文章于 2025-03-20 16:59:52 发布

阅读量1.5k

点赞数

分类专栏： js AJAX 文章标签： ajax javascript html jquery json

本文链接：https://blog.youkuaiyun.com/baidu_32691373/article/details/78073478

版权

AJAX 同时被 2 个专栏收录

4 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍了一种使用jQuery和AJAX实现留言板数据加载的方法。通过发送请求获取后台数据，并利用jQuery处理JSON数据来动态生成HTML内容，实现了留言板的留言显示功能。文章详细解释了如何区分并展示有回复和无回复的留言。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$().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); 
	}

下面是效果图：