<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>.html</title>
<style>
*{margin:0;padding:0}
#baidu{width:35%;margin:20px auto}
.comment{display:block;cursor:pointer;color:#369}
hr{width:98%;color:#ccc;margin:0 0 5px 0;}
.comment_list{border:1px solid #ccc;padding:0 5px;}
.public{border:1px solid #ccc;padding:0 5px;display:none;}
.txt{width:96%;margin:5px 0 0 5px;}
.pluc{width:98%;text-align:right;}
.btn{width:50px;cursor:pointer}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
var div=$("div");
for(var i=0;i<div.length;i++){
var a=$("<span class='comment'>0条评论</span><hr><div class='comment_list'></div><div class='public'></div>");//注意：这个a变量必须在for里面
div.eq(i).append(a);
} //if(!$("div").has("form").length){}表示当div里form个数为0的话，就。。。
$(".comment").each(function(index,value){
$(this).on("click",function(){
if(!$(".public").eq(index).has("form").length){//如果里面还没有添加进来
$.ajax({
type:"post",
url:"",
beforeSend:function(){//发送之后，成功之前
$(".public").eq(index).append("<dl class='loadding'><dd>正在加载评论</dd></dl>");
}
success:function(data){
$(".public").eq(index).find("loadding").hide();//加载成功之后把它隐藏起来
//然后解析反回来的数据,显示在对应的主题下方
$("data").each(function(index,value){
$(".comment_list").eq(index).append("<dl><dt class='who'>"+value.user+"</dt><dd>"+value.comment+"</dd><dd='date'>"+value.date+"</dd><hr></dl>");
}); //然后显示发表区
$(".public").eq(index).append("<form><textarea class='txt'></textarea><p class='pluc'><button class='btn'>发表</button></p></form>");
//然后，当点击发表按钮的时候，发送ajax表单请求
$(".public").eq(index).find(".btn").click(function(){
$.ajax({
type:'post',
url:'',
data:$($(".public").eq(index).find("form")).serialize()，
success：function(data){
if (data) {
$(_this).button('enable');
$('#loading').css('background', 'url(img/success.gif) no-repeat 20px center').html('数据新增成功...');
}
}
});

});
}
});

if($(".public").eq(index).is(':hidden')){
$(".public").eq(index).show();
}else{
$(".public").eq(index).hide();
}
}


});
});
});

</script>
</head>
<body>
<div id="baidu">
<div class="one">百度联盟内容生态亮相魔都 以内容引爆流量价值</div>

<div class="two">百度糯米影业打通影视和生活服务消费市场</div>

<div class="three">人工智能让营销更懂人心 百度接连斩获营销界实力大奖</div>
</div>

</body>
</html>

ajax发布评论 、显示评论的更多相关文章

  1. 模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）

      我们大部分人都发过动态,想必都知道发动态.回复评论.删除动态的整个过程,那么作为初学者,要模仿这些功能有点复杂的,最起码表的关系得弄清楚~~ 先把思路理一下: (1)用户登录,用session读取 ...

  2. 课堂Beta发布140字评论

    Beta发布140字评论: 第一组:飞天小女警 此项目组的功能是礼物挑选,创意十足,用户只要一听名字便会被深深吸引,并且页面设计感,时尚感十足,不断吸引客户的眼球,而且发布到云服务器上面. 第二组:金 ...

  3. Fireeye火眼公司发布报告，评论中国网络间谍活动

    2013年10月2日,Fireeye火眼公司发布报告,评论中国网络间谍活动-Fireeye(美 国火眼公司)发布报告<世界网络大战:理解网络攻击背后的国家意图>(World War C: ...

  4. 修正zen cart商品评论显示太短的问题

    找到includes\modules\pages\product_reviews\header_php.php $reviews_query_raw = “SELECT r.reviews_id, l ...

  5. SpringBoot开发十八-显示评论

    需求介绍 显示评论,还是我们之前做的流程. 数据层:根据实体查询一页的评论数据,以及根据实体查询评论的数量 业务层:处理查询评论的业务,处理查询评论数量的业务 表现层:同时显示帖子详情数据时显示该帖子 ...

  6. BBS-文章详情页、评论、评论树

    1.简单的实现评论功能 article_detail.html,拿到数据  由路--给视图函数--写入数据库 <p>评论内容:</p> <textarea name=&q ...

  7. jsonp、瀑布流布局、组合搜索、多级评论（评论树）、Tornado初识

    1.JSONP原理剖析以及实现 1.1 同源策略限制 用django分别建立两个项目,jsonp01和jsonp02,然后再在这两个项目里分别建立一个app,比如名字叫jsonp1.jsonp2:js ...

  8. 微信支付 发布后显示 System:access_denied

    微信支付发布后显示 System:access_denied (android)或 System:not_allow(IOS) 我们项目用的是.NET MVC3 授权目录是:http://mynetd ...

  9. Ajax接收并显示后台传来的list集合内的数据信息

    最近在学习Ajax做一个留言系统的时候碰到需要将list集合从后台传到前台ajax接收并显示的情况,在网上搜了很多,但很多情况都不是和我遇见的情况一样的,现在,直接贴出我的问题及解决方法. 后台代码: ...

  10. jquery Ajax请求中显示Loading...

    jquery Ajax请求中显示Loading... $('#btnTest').click(function(){      $.ajax({           url ---- ,根据你需要设置 ...

随机推荐

  1. rtc关机闹钟6 AlarmManagerService研究

    这个是 private void setLocked(int type, long when) { if (mNativeData != 0) {            // The kernel n ...

  2. Android WebView如何加载assets下的html文件

    项目需求:将html文件以及所用到的图片都放在 assets/html/ 目录下.然后在页面上通过WebView来显示 直接付上代码: private void readHtmlFormAssets( ...

  3. LightOJ1002 分类： 比赛 最短路 2015-08-08 15:57 15人阅读 评论(0) 收藏

    I am going to my home. There are many cities and many bi-directional roads between them. The cities ...

  4. form 提交

    1.方式1:字段加验证 @model MvcWeb.Models.UserInfo @{ ViewBag.Title = "Add"; } <h2>Add</h2 ...

  5. flume ng系列之——flume安装

    flume版本:1.5.0 1.下载安装包: http://www.apache.org/dyn/closer.cgi/flume/1.5.0/apache-flume-1.5.0-bin.tar.g ...

  6. JavaScript的循环语句

    JavaScript的循环语句 1.JavaScript的循环语句 (1)for循环语句 - 循环代码块一定的次数: (2)for/in循环语句 - 循环遍历对象的属性: (3)while循环语句 - ...

  7. ：判断101-200之间有多少个素数，并输出所有素数。 程序分析：判断素数的方法：用一个数分别去除2到sqrt(这个数)，如果能被整除， 则表明此数不是素数，反之是素数。

    package C; public class Sushu { public static void main(String[] args) { int sum=0; for (int i = 101 ...

  8. 中国特色社会主义的体制中有这样的现象：地方省政府要坚持党的领导和按 照国务院的指示进行安全生产。请编写一个java应用程序描述上述的体制现象。

    package a; public interface CentralPartyCommittee { void partyLeader(); } package a; public abstract ...

  9. ProgressBar 的使用

    ProgressBar 的使用方法 转载:http://blog.csdn.net/mad1989/article/details/38042875

  10. V-rep学习笔记：转动关节1

    V-REP(Virtual Robot Experimentation Platform),是全球领先的机器人及模拟自动化软件平台.V-REP让使用者可以模拟整个机器人系统或其子系统(如感测器或机械结 ...