<!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. protoful进行序列化

    Protocol Buffers 是一种轻便高效的结构化数据存储格式,可以用于结构化数据串行化,或者说序列化.它很适合做数据存储或 RPC 数据交换格式.可用于通讯协议.数据存储等领域的语言无关.平台 ...

  2. tomcat部署到根路径

    在Tomcat中部署war包很简单: 首先,直接把相应的war包放到$TOMCAT_HOME/webapps下,不用建目录: 然后,修改$TOMCAT_HOME/conf/server.xml,在Ho ...

  3. 递归，动态规划，找最短路径，Help Jimmy

    题目链接:http://poj.org/problem?id=1661 解题报告: 1.老鼠每次来到一块木板上都只有两条路可以走,可以使用递归 #include <stdio.h> #in ...

  4. Android各种获取Context方法

    首先讲一讲这四个函数的区别,后面还有我对context的一些理解区别如下所示: 原文链接http://stackoverflow.com/questions/6854265/getapplicatio ...

  5. NSIS学习记录の----win8.1和win10对于NSIS创建的卸载快捷方式无法在开始目录下显示

    NSIS提供了很好的软件卸载功能编写的方法,但是针对win8.1和win10操作系统,由于开始目录的权限限制,我们有时候并不能完美的完成所需要的功能----卸载程序的快捷方式不能显示.话不多说,下面提 ...

  6. 通用的linux下安装配置svn独立服务

    参考资料: http://www.blogjava.net/zhouf/articles/251476.html http://www.cnblogs.com/thinksasa/archive/20 ...

  7. CString.Format

    Cstring str: str.Format("%d",num); d输出带符号十进制数 o输出无符号八进制数 x输出无符号十六进制数 u输出无符号数 c输出单个字符 s输出一串 ...

  8. 仿word导航窗口的展开与折叠

    // 标识是否是展开状态 bool isExtend = true; // 定义可以扩展的宽度 const int PanelWidth = 444; private void expandableS ...

  9. Shell脚本编程初体验

    原文:http://linoxide.com/linux-shell-script/guide-start-learning-shell-scripting-scratch/ 作者: Petras L ...

  10. web应用中web.xml配置详解

    Web.xml常用元素 <web-app> <display-name></display-name>定义了WEB应用的名字 <description> ...