PHP+Mysql+jQuery实现发布微博程序(jQuery篇)

我们在QQ个人中心或者新浪微博等网站上可以看到一个发表话题的应用。该应用实现了即时统计输入字数,并且通过ajax与后台交互,将输入内容插入到话题列表中。我将整个流程分为两部分,本文讲解第一部分jquery实现前端交互操作。

XHTML

  1. <form id="myform" action="" method="post"> 
  2.    <h3><span class="counter">140</span>说说你正在做什么...</h3> 
  3.    <textarea name="saytxt" id="saytxt" class="input" rows="2" cols="40"></textarea> 
  4.    <p> 
  5.       <input type="image" src="images/btn.gif" class="sub_btn" alt="发布" /> 
  6.       <span id="msg"></span> 
  7.    </p> 
  8. </form> 
  9. <div class="clear"></div> 
  10. <div id="saywrap"> 
  11.     <div class="saylist"> 
  12.        <a href="#"><img src="images/user.gif" alt="" /></a> 
  13.        <div class="saytxt"> 
  14.           <p><strong><a href="#">Demo</a></strong>发布的内容...</p> 
  15.            <div class="date"></div> 
  16.        </div> 
  17.        <div class="clear"></div> 
  18.     </div> 
  19. </div> 

XHTML是一个表单,里面有输入框textarea,发布按钮,还有一个统计输入字数的span#counter,和信息提示span#msg,在没有输入的情况下就提交则会提示用户要求输入内容。

CSS 

  1. h3{height:32pxline-height:32pxfont-size:18px
  2. h3 span{float:rightfont-size:32pxfont-family:Georgia,serif; color:#cccoverflow:hidden
  3. .input{width:594pxheight:58pxmargin:5px 0 10px 0padding:4px 2px;  
  4. border:1px solid #aaafont-size:12pxline-height:18pxoverflow:hidden
  5. .sub_btn{float:rightwidth:94pxheight:28px;} 
  6. #msg{color:#f30
  7. .clear{clear:both
  8. .saylist{margin:8px autopadding:4px 0border-bottom:1px dotted #d3d3d3
  9. .saylist img{float:leftwidth:50pxmargin:4px
  10. .saytxt{float:rightwidth:530pxoverflow:hidden
  11. .saytxt p{line-height:18px
  12. .saytxt p strong{margin-right:6px
  13. .date{color:#999

jQuery

先引入jquery库和global.js文件:

  1. <script type="text/javascript" src="js/jquery.js"></script> 
  2. <script type="text/javascript" src="js/global.js"></script> 

global.js文件:

global.js要做的事有:

1、用户输入、鼠标离开输入框时,统计输入的字符数,并根据输入字数的不同而输出不同的样式(字体颜色)显示在页面上。

2、处理提交数据:当点击“发布”按钮时,显示等待图片,通过ajax想后台提交输入的数据,等待后台处理,并将处理结果输出给前端页面。

具体代码如下:

  1. function recount(){ 
  2.     var maxlen=140; 
  3.     var current = maxlen-$('#saytxt').val().length; 
  4.     $('.counter').html(current); 
  5.  
  6.     if(current<1 || current>maxlen){ 
  7.         $('.counter').css('color','#D40D12'); 
  8.         $('input.sub_btn').attr('disabled','disabled'); 
  9.     } 
  10.     else 
  11.         $('input.sub_btn').removeAttr('disabled'); 
  12.  
  13.     if(current<10) 
  14.         $('.counter').css('color','#D40D12'); 
  15.  
  16.     else if(current<20) 
  17.         $('.counter').css('color','#5C0002'); 
  18.  
  19.     else 
  20.         $('.counter').css('color','#cccccc'); 
  21.  

函数recount()完成了输入字符的统计,并根据输入的字符数,显示不同的字体颜色。

  1. $(function(){ 
  2.     $('#saytxt').bind("blur focus keydown keypress keyup"function(){ 
  3.         recount(); 
  4.     }); 
  5.     $("#myform").submit(function(){ 
  6.         var saytxt = $("#saytxt").val(); 
  7.         if(saytxt==""){ 
  8.             $("#msg").show().html("你总得说点什么吧.").fadeOut(1200);; 
  9.             return false
  10.         } 
  11.         $('.counter').html('<img style="padding:8px" src="images/load.gif" alt="正在处理..." />'); 
  12.         $.ajax({ 
  13.            type: "POST"
  14.            url: "submit.php"
  15.            data:"saytxt="+saytxt, 
  16.            dataType: "html"
  17.            success: function(msg){ 
  18.               if(parseInt(msg)!=0){ 
  19.                  $('#saywrap').prepend(msg); 
  20.                  $('#saytxt').val(''); 
  21.                  recount(); 
  22.              } 
  23.           } 
  24.         }); 
  25.         return false
  26.     }); 
  27. }); 

提交数据给后台后,由submit.php进行处理,关于后台的处理程序,请移步PHP+Mysql+jQuery实现发布微博程序(PHP篇)

转载请注明:代码家园 » PHP+Mysql+jQuery实现发布微博程序(jQuery篇)

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)