评论
- 盖楼样式
Paste_Image.png
-
盖楼样式代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盖楼评论样式</title> <style media="screen"> .container{ width: 400px; height: 600px; background-color: gray; margin:0 auto; } .container .comment { padding: 10px; } .container .comment .floor{ width: 90%; height: auto; border: 1px solid red; margin:5px; text-indent:1em; } </style> </head> <body> <div class="container"> <div class="comment"> <div class="floor"> <div class="floor"> <div class="floor"> <div class="floor"> <p>楼主！</p> </div> <p>这里是1楼！</p> </div> <p>这里是2楼！</p> </div> <p>这里是3楼!</p> </div> </div> </div> </div> </body> </html> -
实现，通过 ajax 来实现获取数据和添加！
准备 json 数据var data = [ { "plid": "1", "plName": "twitch", "pltime": "2016082301", "plcontent": "盖楼样式评论，真的好嘛 !" }, { "plid": "2", "plName": "twitch", "pltime": "2016082302", "plcontent": "盖楼样式评论，一楼路过!" }, { "plid": "3", "plName": "twitch", "pltime": "2016082303", "plcontent": "盖楼样式评论，二楼路过 !" }, { "plid": "4", "plName": "twitch", "pltime": "2016082304", "plcontent": "盖楼样式评论，三楼路过 !" } ]; js代码，将json 数据进行包装填充到页面中去
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盖楼评论样式</title>
<style media="screen">
.container{
width: 400px;
height: 600px;
background-color: gray;
margin:0 auto;
}
.container .comment {
padding: 10px;
}
.floor{
width: 90%;
height: auto;
border: 1px solid red;
margin:5px;
text-indent:1em;
}
</style>
</head>
<body>
<div class="container">
<div id="comment">
</div>
</div>
<script type="text/javascript">
var data = [
{
"plid": "1",
"plName": "twitch",
"pltime": "2016082301",
"plcontent": "盖楼样式评论，真的好嘛 !"
},
{
"plid": "2",
"plName": "twitch",
"pltime": "2016082302",
"plcontent": "盖楼样式评论，一楼路过!"
},
{
"plid": "3",
"plName": "twitch",
"pltime": "2016082303",
"plcontent": "盖楼样式评论，二楼路过 !"
},
{
"plid": "4",
"plName": "twitch",
"pltime": "2016082304",
"plcontent": "盖楼样式评论，三楼路过 !"
}
];
var result = "";
result += '<div class="floor">';
for(var i=1;i<data.length;i++){
result += "<div id='fl"+ data[i].plid + "' class='floor'>";
};
for(var i=1;i<data.length;i++){
result += "<p>"+ data[i].plcontent+ "</p></div>";
};
result += "<p>"+ data[0].plcontent+ "<P></div>";
document.getElementById("comment").innerHTML = result;
</script>
</body>
</html>
-
数据库存储结构
{ "_id":ObiectId("57baf5b16bd4cda73990cfd0"), "_gid":"5703a45ed3db3a121c4a3d2e", "_status":0, "_contents":[ { "_userPhone":"12345678911", "_content":"test", "_id":ObjectId("57baf5b16bd4cda73990cfd1"), "_addTime":ISODate("2016-08-22T12:53:05.032Z") }, { "_userPhone":"12345678911", "_content":"test", "_id":ObjectId("57baf5b16bd4cda73990cfd1"), "_addTime":ISODate("2016-08-22T12:53:05.032Z") }, { "_userPhone":"12345678911", "_content":"test", "_id":ObjectId("57baf5b16bd4cda73990cfd1"), "_addTime":ISODate("2016-08-22T12:53:05.032Z") }, ], "__v":3 } -
回复功能
$('.goodscsheia').click(function(){ var content = $('#sendM').val(); var cid = $(this).data('cidd'); $.ajax({ url:'http://x.x.x.x:3000/admin/disAdd', data:{ id:cid, con:content }, type:'post', dataType:'json', success:function(data){ if(data.result == 'yes'){ $('#sendM').val(' '); getDiscuss(); }else if(data.result == 'noLogin'){ $('#hiddenLogin').click(); } } }); }); -
评论模块
function doDiscuss(){ var con = $('#sendM').val(); $.ajax({ url:'http://x.x.x.x:3000/admin/doDiscuss', data:{ content:con, gid:goodsId }, dataType:'json', type:'post', success:function (data){ if(data.result == 'yes'){ $('#sendM').val(' '); getDiscuss(); alert('发布成功'); }else if(data.result == 'noLogin'){ $('#hiddenLogin').click(); } } }); } -
表单序列化
$('div').test($("form").serialize());
