快捷導(dǎo)航

PHP+Mysql+jQuery實(shí)現(xiàn)發(fā)布微博程序 jQuery篇

更新時(shí)間：2011年10月08日 23:23:25 作者：

我們在QQ個(gè)人中心或者新浪微博等網(wǎng)站上可以看到一個(gè)發(fā)表話題的應(yīng)用

該應(yīng)用實(shí)現(xiàn)了即時(shí)統(tǒng)計(jì)輸入字?jǐn)?shù)，并且通過ajax與后臺(tái)交互，將輸入內(nèi)容插入到話題列表中。我將整個(gè)流程分為兩部分，本文講解第一部分jquery實(shí)現(xiàn)前端交互操作。

首先查看示例：DEMO

XHTML

復(fù)制代碼代碼如下:

 
<form id="myform" action="" method="post"> 
<h3><span class="counter">140</span>說說你正在做什么...</h3> 
<textarea name="saytxt" id="saytxt" class="input" rows="2" cols="40"></textarea> 
<p> 
<input type="image" src="images/btn.gif" class="sub_btn" alt="發(fā)布" /> 
<span id="msg"></span> 
</p> 
</form> 
<div class="clear"></div> 
<div id="saywrap"> 
<div class="saylist"> 
<a href="#"><img src="images/user.gif" alt="" /></a> 
<div class="saytxt"> 
<p><strong><a href="#">Demo</a></strong>發(fā)布的內(nèi)容...</p> 
<div class="date"></div> 
</div> 
<div class="clear"></div> 
</div> 
</div> 

XHTML是一個(gè)表單，里面有輸入框textarea，發(fā)布按鈕，還有一個(gè)統(tǒng)計(jì)輸入字?jǐn)?shù)的span#counter，和信息提示span#msg,在沒有輸入的情況下就提交則會(huì)提示用戶要求輸入內(nèi)容。
CSS

復(fù)制代碼代碼如下:

 
h3{height:32px; line-height:32px; font-size:18px} 
h3 span{float:right; font-size:32px; font-family:Georgia,serif; color:#ccc; overflow:hidden} 
.input{width:594px; height:58px; margin:5px 0 10px 0; padding:4px 2px; 
border:1px solid #aaa; font-size:12px; line-height:18px; overflow:hidden} 
.sub_btn{float:right; width:94px; height:28px;} 
#msg{color:#f30} 
.clear{clear:both} 
.saylist{margin:8px auto; padding:4px 0; border-bottom:1px dotted #d3d3d3} 
.saylist img{float:left; width:50px; margin:4px} 
.saytxt{float:right; width:530px; overflow:hidden} 
.saytxt p{line-height:18px} 
.saytxt p strong{margin-right:6px} 
.date{color:#999} 

jQuery
先引入jquery庫和global.js文件：

復(fù)制代碼代碼如下:

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

global.js文件：
global.js要做的事有：
1、用戶輸入、鼠標(biāo)離開輸入框時(shí)，統(tǒng)計(jì)輸入的字符數(shù)，并根據(jù)輸入字?jǐn)?shù)的不同而輸出不同的樣式（字體顏色）顯示在頁面上。
2、處理提交數(shù)據(jù)：當(dāng)點(diǎn)擊“發(fā)布”按鈕時(shí)，顯示等待圖片，通過ajax想后臺(tái)提交輸入的數(shù)據(jù)，等待后臺(tái)處理，并將處理結(jié)果輸出給前端頁面。
具體代碼如下：

復(fù)制代碼代碼如下:

 
function recount(){ 
var maxlen=140; 
var current = maxlen-$('#saytxt').val().length; 
$('.counter').html(current); 
if(current<1 || current>maxlen){ 
$('.counter').css('color','#D40D12'); 
$('input.sub_btn').attr('disabled','disabled'); 
} 
else 
$('input.sub_btn').removeAttr('disabled'); 
if(current<10) 
$('.counter').css('color','#D40D12'); 
else if(current<20) 
$('.counter').css('color','#5C0002'); 
else 
$('.counter').css('color','#cccccc'); 
} 

函數(shù)recount()完成了輸入字符的統(tǒng)計(jì)，并根據(jù)輸入的字符數(shù)，顯示不同的字體顏色。

復(fù)制代碼代碼如下:

 
$(function(){ 
$('#saytxt').bind("blur focus keydown keypress keyup", function(){ 
recount(); 
}); 
$("#myform").submit(function(){ 
var saytxt = $("#saytxt").val(); 
if(saytxt==""){ 
$("#msg").show().html("你總得說點(diǎn)什么吧.").fadeOut(2000);; 
return false; 
} 
$('.counter').html('<img style="padding:8px" src="images/load.gif" alt="正在處理..." />'); 
$.ajax({ 
type: "POST", 
url: "submit.php", 
data:"saytxt="+saytxt, 
dataType: "html", 
success: function(msg){ 
if(parseInt(msg)!=0){ 
$('#saywrap').prepend(msg); 
$('#saytxt').val(''); 
recount(); 
}else{ 
$("#msg").show().html("系統(tǒng)錯(cuò)誤.").fadeOut(2000); 
return false 
} 
} 
}); 
return false; 
}); 
}); 