PHP+Mysql+jQueryが微博プログラムjQuery編を発表することを実現しました。

このアプリケーションは、即時集計入力文字数を実現し、ajaxを介して楽屋と対話して、入力内容を話題リストに挿入します。全体の流れを二つの部分に分けて、本稿では第一部分のjqueryが先端相互作用を実現することを説明します。
まず例を見ます。DEMO
XHTML

 
<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="  " /> 
<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>     ...</p> 
<div class="date"></div> 
</div> 
<div class="clear"></div> 
</div> 
</div> 

XHTMLはフォームであり、入力ボックスtextarea、リリースボタン、入力文字数を統計するspan counterと情報提示span msgがあり、入力していない場合は提出するとユーザーに入力内容を要求するように促す。CSS

 
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ファイルを導入します。

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

global.jsファイル：global.jsファイル：global.jsやるべきことは、1、ユーザー入力、マウスが入力ボックスを離れる時に、入力した文字数を統計して、入力字数によって異なるスタイル（フォントの色）を出力してページに表示します。2、提出データを処理する：「リリース」ボタンをクリックすると、待ち受け画像が表示され、ajaxを通じて入力データをバックグラウンドに提出し、バックグラウンド処理を待って、処理結果をフロントエンドページに出力する。具体的なコードは、

 
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'); 
} 

関数recount（）が入力文字の統計を完了し、入力された文字数に応じて異なるフォント色を表示します。

 
$(function(){ 
$('#saytxt').bind("blur focus keydown keypress keyup", function(){ 
recount(); 
}); 
$("#myform").submit(function(){ 
var saytxt = $("#saytxt").val(); 
if(saytxt==""){ 
$("#msg").show().html("        .").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("    .").fadeOut(2000); 
return false 
} 
} 
}); 
return false; 
}); 
}); 

データをバックグラウンドに提出した後、submit.phpで処理します。バックグラウンドの処理手順については、次の文章で重点的に説明しますので、ご注意ください。