<!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. css 前景色与背景色

    前景色:color:#990000; 背景色:background-color:red; 可以用来设置文字的前景色与背景色 <!-- 作者:纤锐出处:http://www.cnblogs.com ...

  2. 【转】表删除时 Cannot delete or update a parent row: a foreign key constraint fails 异常处理

    转载地址:http://lijiejava.iteye.com/blog/790478 有两张表,结构如下: t_item:                          t_bid: id    ...

  3. android5.0 编译

    android5.0编译需要jdk1.7版本,将来本地可能需要同时维护两套jdk版本,请参考: 在线安装openjdk1.7 sudo apt-get install openjdk-7-jre op ...

  4. JAVA基础知识之JVM-——自定义类加载器

    JVM中除了根加载器之外其他加载器都是ClassLoader的子类实例, 可以通过扩展ClassLoader的子类,通过重写方法来实现自定义的类加载器. ClassLoader中有两个关键的方法如下, ...

  5. Solr开发文档

    转载:http://www.cnblogs.com/hoojo/archive/2011/10/21/2220431.html Solr 是一种可供企业使用的.基于 Lucene 的搜索服务器,它支持 ...

  6. promise理解

    每个操作都返回一样的promise对象,保证链式操作 每个链式都通过then方法 每个操作内部允许犯错,出了错误,统一由catch error处理 操作内部,也可以是一个操作链,通过reject或re ...

  7. 2016年11月19日 星期六 --出埃及记 Exodus 20:10

    2016年11月19日 星期六 --出埃及记 Exodus 20:10 but the seventh day is a Sabbath to the LORD your God. On it you ...

  8. shell控制流结构笔记

      man  test 可以看见这些     比较符号:-lt小于 -le小于等于   -gt大于   -ge大于等于  -ne不等于   -eq等于              < 小于(需要双 ...

  9. Xcode的Architectures和Valid Architectures的区别,

    登录 | 注册 ys410900345的专栏 目录视图摘要视图订阅 学院APP首次下载,可得50C币!     欢迎来帮助开源“进步”     当讲师?爱学习?投票攒课吧     CSDN 2015博 ...

  10. CentOS系统识别NTFS分区的移动硬盘

    第一步:下载rpmforge,下载对应的版本,就是对应CentOS版本,还有32位与64位也要对应上.rpmforge拥有4000多种CentOS的软件包,被CentOS社区认为是最安全也是最稳定的一 ...