<!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. HASH表原理(装)

    HASH表原理 大家都知道,在所有的线性数据结构中,数组的定位速度最快,因为它可通过数组下标直接定位到相应的数组空间,就不需要一个个查找.而哈希表就是利用数组这个能够快速定位数据的结构解决以上的问题的 ...

  2. PreparedStatement接口及其方法的使用

    PreparedStatement接口是Statement接口的子接口,使用它的好处有三个 一:简化代码,便于sql语句的书写 二:有效的禁止sql语句的注入,例如:用户名和密码,使用Prepared ...

  3. 哈希-Snowflake Snow Snowflakes 分类： POJ 哈希 2015-08-06 20:53 2人阅读 评论(0) 收藏

    Snowflake Snow Snowflakes Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 34762 Accepted: ...

  4. JAVA基础知识之网络编程——-基于AIO的异步Socket通信

    异步IO 下面摘子李刚的<疯狂JAVA讲义> 按照POSIX标准来划分IO,分为同步IO和异步IO.对于IO操作分为两步,1)程序发出IO请求. 2)完成实际的IO操作. 阻塞IO和非阻塞 ...

  5. ural 1104，暴力取模

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1104 题目大意:输入一个字符串(数字与大写字母组成),输出n,n满足此字符串为n进制时, ...

  6. reactjs入门到实战（六）---- ReactJS组件API详解

    全局的api 1.React.createClass 创建一个组件类,并作出定义.组件实现了 render() 方法,该方法返回一个子级.该子级可能包含很深的子级结构.组件与标准原型类的不同之处在于, ...

  7. 解决点击状态栏时ScrollView自动滚动到初始位置失效办法

    http://www.cocoachina.com/ios/20150807/12949.html 取消点击状态栏scrollView会自动滚动到初始位置的功能 _scrollView.scrolls ...

  8. ios沙盒路径

    http://www.cnblogs.com/ios-wmm/p/3299695.html iOS沙盒路径的查看和使用 NSString *path = NSHomeDirectory();//主目录 ...

  9. acdream1197 Points In Cuboid

    题目链接:http://acdream.info/problem?pid=1197 题意:给出一些点.每次给出一个长方体,问在长方体中的点的个数. 思路:kd-tree. const int N=11 ...

  10. js写个日历

    其实我是一个对时间和日期不怎么感兴趣的人,小学的时候感觉时间或者日期那块就让我很晕,因为有时候是100进制有时候是60进制,搞的我对日历一直很不感兴趣,最近不知道为什么想写一个日历了,可想而知,这个玩 ...