PHP+MySQL+jQuery打造自己的微博程序

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

　　

 

　　XHTML代码

 

<ol class="dp-xml">
<li class="alt"><span><span class="tag"><span class="tag-name">form</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"myform"</span><span> </span><span class="attribute">action</span><span>=</span><span class="attribute-value">"say.php"</span><span> </span><span class="attribute">method</span><span>=</span><span class="attribute-value">"post"</span><span class="tag">></span><span>        </span></span></span></li>
<li>
<span>    </span><span class="tag"><span class="tag-name">h3</span><span class="tag">></span><span class="tag"><span class="tag-name">span</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"counter"</span><span class="tag">></span><span>140</span><span class="tag"></span><span class="tag-name">span</span><span class="tag">></span><span>说说你正在做什么...</span><span class="tag"></span><span class="tag-name">h3</span><span class="tag">></span><span>        </span></span></span>
</li>
<li class="alt">
<span>    </span><span class="tag"><span class="tag-name">textarea</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"saytxt"</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"saytxt"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"input"</span><span> </span><span class="attribute">rows</span><span>=</span><span class="attribute-value">"2"</span><span> </span><span class="attribute">cols</span><span>=</span><span class="attribute-value">"40"</span><span class="tag">></span><span class="tag"></span><span class="tag-name">textarea</span><span class="tag">></span><span>        </span></span>
</li>
<li>
<span>    </span><span class="tag"><span class="tag-name">p</span><span class="tag">></span><span>           </span></span>
</li>
<li class="alt">
<span>       </span><span class="tag"><span class="tag-name">input</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"image"</span><span> </span><span class="attribute">src</span><span>=</span><span class="attribute-value">"images/btn.gif"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"sub_btn"</span><span> </span><span class="attribute">alt</span><span>=</span><span class="attribute-value">"发布"</span><span> </span><span class="tag">/></span><span>           </span></span>
</li>
<li>
<span>       </span><span class="tag"><span class="tag-name">span</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"msg"</span><span class="tag">></span><span class="tag"></span><span class="tag-name">span</span><span class="tag">></span><span>        </span></span>
</li>
<li class="alt">
<span>    </span><span class="tag"></span><span class="tag-name">p</span><span class="tag">></span><span>     </span>
</li>
<li>
<span class="tag"></span><span class="tag-name">form</span><span class="tag">></span><span>     </span>
</li>
<li class="alt"><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"clear"</span><span class="tag">></span><span class="tag"></span><span class="tag-name">div</span><span class="tag">></span><span>     </span></span></li>
<li><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"saywrap"</span><span class="tag">></span><span>         </span></span></li>
<li class="alt">
<span>     </span><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"saylist"</span><span class="tag">></span><span>            </span></span>
</li>
<li>
<span>        </span><span class="tag"><span class="tag-name">a</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"#"</span><span class="tag">></span><span class="tag"><span class="tag-name">img</span><span> </span><span class="attribute">src</span><span>=</span><span class="attribute-value">"images/user.gif"</span><span> </span><span class="attribute">alt</span><span>=</span><span class="attribute-value">""</span><span> </span><span class="tag">/></span><span class="tag"></span><span class="tag-name">a</span><span class="tag">></span><span>            </span></span></span>
</li>
<li class="alt">
<span>        </span><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"saytxt"</span><span class="tag">></span><span>               </span></span>
</li>
<li>
<span>            </span><span class="tag"><span class="tag-name">p</span><span class="tag">></span><span class="tag"><span class="tag-name">strong</span><span class="tag">></span><span class="tag"><span class="tag-name">a</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"#"</span><span class="tag">></span><span>Demo</span><span class="tag"></span><span class="tag-name">a</span><span class="tag">></span><span class="tag"></span><span class="tag-name">strong</span><span class="tag">></span><span>发布的内容...</span><span class="tag"></span><span class="tag-name">p</span><span class="tag">></span><span>                </span></span></span></span>
</li>
<li class="alt">
<span>            </span><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"date"</span><span class="tag">></span><span class="tag"></span><span class="tag-name">div</span><span class="tag">></span><span>            </span></span>
</li>
<li>
<span>        </span><span class="tag"></span><span class="tag-name">div</span><span class="tag">>						
</span>
</li>
</ol>