留言板功能

最新推荐文章于 2024-05-14 11:44:37 发布

static_mkk

最新推荐文章于 2024-05-14 11:44:37 发布

阅读量3.2k

点赞数 2

分类专栏： AJAX 数据库文章标签： jquery ajax 数据库

本文链接：https://blog.csdn.net/baidu_32691373/article/details/78105698

版权

本文介绍如何利用jQuery和Ajax技术实现一个无刷新的留言板功能，包括获取留言、加载更多、提交及回复留言，所有操作均在后台处理并实时更新到数据库，无需页面刷新。

摘要由CSDN通过智能技术生成

1.实现获取留言

2.获取更多留言

3.留言（不刷新加载到html，写入数据库）

4.回复留言（不刷新加载到html，写入数据库）

HTML部分全部代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>吃饭最有趣</title>
<script src="../../js_css/jquery-3.2.1.js"></script>
</head>
<body style="color: olive; background-color: silver;">
	<div class="container">
		
		<div class="row clearfix" style="margin-top: 40px">
			<!--这是大的DIV包括body和rigth  -->
			<!-- 评论区域 -->
			<div class="col-md-8 column" id ="show_comment">


		<!-- 这里开始写品论的内容-->
		<!-- 这里用ajax来获取后台的留言数据 -->
		<script type="text/javascript">
			$().ready(function() {
				//获取留言信息
				getComment();
				//查询更多
				$("#moreComment").click(function () {
					var _page_now = $("#moreComment").attr("name");
					//alert(_page_now);
					var page_now = parseInt(_page_now);
					getComment(page_now);
				});
					
				
				
			});
			
			
			
			
	function  getComment(page_now){
		if(page_now == null || page_now < 1){
			page_now = 1;
		}else{
			page_now = page_now + 1 ;
		}
		$.ajax({
			url : "../../CommentServlet?method=getComment&page_now="+page_now+"&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为该索引的对象。
					
					//获取当前页，并复制到
					$("#moreComment").attr("name",va.page_now);
					//alert(va.page_now);
					//对象变量名[“属性名”] 得到该对象下该属性名的属性值
					var list = va["list"];
					
					//写一个存放所有评论的com_id的数组，用于后面和con_pid进行比较，如果相同，则说明，该评论有回复，就加上回复的内容
					$.each(list,function(p,va){
						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 != ""){//有回复
							var html = jsonToHtml(va);
							$("#"+com_id).children(".panel-body").append(html);
							//$(html).insertAfter("form[name='pinglun']"); 
							}
					});	
				});	
			},
			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);
		$(html).insertBefore("#more"); 
	}
		
function replay(com_id) {//这里把回复留言的com_id拿到，

最低0.47元/天解锁文章

static_mkk

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
留言板功能

1.实现获取留言 2.获取更多留言3.留言（不刷新加载到html，写入数据库）4.回复留言（不刷新加载到html，写入数据库）HTML部分全部代码如下：吃饭最有趣 $().ready(function() { //获取留言信息 getComment(); //查询更多
复制链接

扫一扫