<!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發布評論 、顯示評論
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。