ajax——模仿新浪微博留言板

<style type="text/css">
　　*{margin:0; padding:0;}
　　.fl{float:left;}
　　.fr{float:right;}
　　.clearFix:after{display:block; clear:both; content:""; }
　　a{text-decoration: none}
　　li{list-style: none}
　　.content{width:100%; background: url(body_bg.jpg) no-repeat #b4daf0; min-height: 700px; overflow: hidden;}
　　.page{width:580px; margin:66px auto 0px; background:#fff; box-shadow: 0 0 2px rgba(0,0,0,0.15); border-radius: 2px; padding:15px 10px 10px;}
　　.p_top span{color: #1b7fb6; font-size: 16px; }
　　.p_center{border-color:1px solid #ccc; min-height: 68px; box-shadow: 0 0 3px 0 rgba(0,0,0,0.15); margin-top: 4px;}
　　.p_center .text{height:68px; margin:0; padding:0; border:none; font-size: 14px; line-height: 18px; overflow: hidden; outline:none; word-wrap: break-word; width: 574px; padding-left: 6px; resize: none;}
　　.p_footer{margin-top: 5px; height: 28px}
　　.p_footer input{background:#ffc09f; color: #fff; border:1px solid #fbbd9e; box-shadow: none; width:80px; height:30px; font-size: 14px; line-height: 29px; padding: 0 10px; border-radius: 2px; outline:none;}
　　.p_content ul li{width:560px; margin:10px auto 0px; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,0.15); border-radius: 2px; padding: 20px; position:relative;}
　　.p_content ul li .del span{width:14px; height:16px; background:url(icon.png) no-repeat 0 -1058px; cursor: pointer;}
　　.btn{margin-top:10px; width: 100%}
　　.btn span{color:#808080; font-size: 12px; width:25%; text-align: left;}
　　.btn a{color:#808080; font-size: 12px; width:25%; text-align: center;}
　　.p_count{ width: 600px; margin: 10px auto 0px;}
　　.p_count a{width: 24px; height:24px; border:1px solid #999; background:#fff; text-align: center;color: #333}
　　.p_count .left{background:url(arrow.png) no-repeat -1px -217px #fff;}
　　.p_count .right{background:url(arrow.png) no-repeat 2px -277px #fff;}
　　.p_count ul{text-align: center; margin-left: 10px;}
　　.p_count ul li{width: 24px; height:24px; border:1px solid #999; background:#fff; margin-right:10px; cursor: pointer;}
</style>

<script>

$(document).ready(function(){
　　var pages = null;
　　var pageNum = 0;
　　var ulNum = 0;
　　$('.left').attr("for",1);
　　$('.right').attr("for",1);
　　var count = function(){
　　　　$.ajax({
　　　　　　url:'weibo.php?act=get_page_count',
　　　　　　type:'GET',
　　　　　　success:function(data){
　　　　　　　　var result = eval('('+data+')');
　　　　　　　　var pages = result.count;
　　　　　　　　$('.p_uls').empty();
　　　　　　　　for(var i=1;i<pages+1;i++){
　　　　　　　　　　var test = '<li class="fl sel_li" for="'+[i]+'">'+[i]+'</li>';
　　　　　　　　　　$('.p_uls').append(test);
　　　　　　　　}
　　　　　　　　pageNum = $('.p_uls').children().length;
　　　　　　}
　　　　})
　　}
　　count();
　　var text = function(num){
　　　　$.ajax({
　　　　　　url:'weibo.php?act=get&page='+num,
　　　　　　type:'GET',
　　　　　　success:function(data){
　　　　　　　　var result = eval('('+data+')');
　　　　　　　　$('.p_ul').empty();
　　　　　　　　for(var i=0;i<result.length;i++){
　　　　　　　　　　var times = result[i].time*1000;
　　　　　　　　　　date(times);
　　　　　　　　　　var text = '<li>'+
　　　　　　　　　　　　'<div class="clearFix del" for="'+result[i].id+'">'+
　　　　　　　　　　　　'<span class="fr delect"></span>'+
　　　　　　　　　　　　'</div>'+
　　　　　　　　　　　　'<p>'+result[i].content+'</p>'+
　　　　　　　　　　　　'<div class="clearFix btn" for="'+result[i].id+'">'+
　　　　　　　　　　　　'<span class="fl">'+oTime+'</span><br />'+
　　　　　　　　　　　　'<a class="fr ref" href="javascript:;">踩&nbsp;'+result[i].ref+'</a>'+
　　　　　　　　　　　　'<a class="fr acc" href="javascript:;">赞&nbsp;'+result[i].acc+'</a>'+
　　　　　　　　　　　　'</div>'+
　　　　　　　　　　　　'</li>';
　　　　　　　　　　$('.p_ul').append(text);
　　　　　　　　}
　　　　　　　　ulNum = $('.p_ul').children().length;
　　　　　　　　if(ulNum >= 0 ){
　　　　　　　　　　$('.p_count').css('display','block');
　　　　　　　　}else{
　　　　　　　　　　$('.p_count').css('display','none');
　　　　　　　　}
　　　　　　　　count();
　　　　　　}
　　　　})
　　}
　　text('1');
　　$('.p_uls').on('click','.sel_li',function(){
　　　　text($(this).attr("for"));
　　　　$('.left').attr("for",$(this).attr("for"));
　　　　$('.right').attr("for",$(this).attr("for"));
　　})
　　$('.left').click(function(){
　　　　var number = $(this).attr("for");
　　　　if(number == 1){
　　　　　　number = 1;
　　　　　　text(number);
　　　　}else{
　　　　　　number--;
　　　　　　text(number);
　　　　}
　　})
　　$('.right').click(function(){
　　　　var number = $(this).attr("for");
　　　　if(number == pageNum){
　　　　　　number = pageNum;
　　　　　　text(number);
　　　　}else{
　　　　　　number++;
　　　　　　text(number);
　　　　}
　　})
　　$('.content').on('click','.add',function(){
　　　　$.ajax({
　　　　　　url:'weibo.php?act=add&content='+$('.text').val(),
　　　　　　type:'POST',
　　　　　　success:function(data){
　　　　　　　　var result = eval('('+data+')');
　　　　　　　　if(result.error == 0){
　　　　　　　　　　alert("添加成功");
　　　　　　　　　　text('1');
　　　　　　　　}else{
　　　　　　　　　　alert("添加失败");
　　　　　　　　}
　　　　　　},
　　　　　　error:function(){
　　　　　　}
　　　　})
　　})
　　$('.content').on('click','.ref',function(){
　　　　$.ajax({
　　　　　　url:'weibo.php?act=ref&id='+$(this).parent().attr("for"),
　　　　　　type:'POST',
　　　　　　success:function(data){
　　　　　　　　var result = eval('('+data+')');
　　　　　　　　if(result.error == 0){
　　　　　　　　　　text('1');
　　　　　　　　}else{
　　　　　　　　　　text('1');
　　　　　　　　}
　　　　　　}
　　　　})
　　})
　　$('.content').on('click','.acc',function(){
　　　　$.ajax({
　　　　　　url:'weibo.php?act=acc&id='+$(this).parent().attr("for"),
　　　　　　type:'POST',
　　　　　　success:function(data){
　　　　　　　　var result = eval('('+data+')');
　　　　　　　　if(result.error == 0){
　　　　　　　　　　text('1');
　　　　　　　　}else{
　　　　　　　　　　text('1');
　　　　　　　　}
　　　　　　}
　　　　})
　　})
　　$('.content').on('click','.delect',function(){
　　　　$.ajax({
　　　　　　url:'weibo.php?act=del&id='+$(this).parent().attr("for"),
　　　　　　type:'POST',
　　　　　　success:function(data){
　　　　　　　　var result = eval('('+data+')');
　　　　　　　　if(result.error == 0){
　　　　　　　　　　alert("删除成功");
　　　　　　　　　　text('1');
　　　　　　　　}else{
　　　　　　　　　　alert("删除失败");
　　　　　　　　　　text('1');
　　　　　　　　}
　　　　　　}
　　　　})
　　})
})
function date(times){
　　var oDate = new Date(times);
　　oMonth = oDate.getMonth()+1;
　　oDay = oDate.getDate();
　　oHour = oDate.getHours();
　　oMin = oDate.getMinutes();
　　oTime = getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin);
　　return oTime;
}
function getzf(num){
　　if(parseInt(num) < 10){
　　　　num = '0'+num;
　　}
　　return num;
}

</script>

<body>
　　<div class="content">
　　　　<div class="page">
　　　　　　<div class="p_top clearFix">
　　　　　　　　<span class="fl">有什么新鲜事想告诉大家?</span>
　　　　　　</div>
　　　　　　<div class="p_center">
　　　　　　　　<textarea class="text"></textarea>
　　　　　　</div>
　　　　　　<div class="p_footer">
　　　　　　　　<input type="button" class="fr add" value="发布" />
　　　　　　</div>
　　　　</div>
　　　　<div class="p_content">
　　　　　　<ul class="p_ul">
　　　　　　</ul>
　　　　</div>
　　　　<div class="p_count clearFix">
　　　　　　<a class="fl left" href="javascript:;"></a>
　　　　　　<ul class="fl p_uls">
　　　　　　</ul>
　　　　　　<a class="fl right" href="javascript:;"></a>
　　　　</div>
　　</div>
</body>