PHP+MySQL+jQuery による独自の Weibo プログラムの作成_PHP チュートリアル

QQ個人センターや新浪微博などのウェブサイトにトピックを投稿するためのアプリケーションが見られます。このアプリケーションは、入力単語数のリアルタイム統計を実現し、Ajax を介してバックグラウンドと対話して、入力コンテンツをトピック リストに挿入します。この記事では、フロントエンドの対話型操作を実装するための jQuery の最初の部分について説明します。

XHTMLコード

<ol class="dp-xml">
<li class="alt"><span><span class="tag"><span class="tag-name">フォーム</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">メソッド</span><span>=</span><span class="attribute-value">"投稿「</span><span class="tag">></span><span> </span>class</span></span></li>=<li>
<span>"カウンター"</span><span class="tag">></span><span class="tag-name">140 </span> <span class="tag"></span><span class="tag">スパン</span><span class="tag-name">></span><span>何をしているのか教えてください...</span><span class="attribute"><span>h3</span><span class="attribute-value">></span><span class="tag"> </span></span>テキストエリア<span class="tag"></span> <span class="tag-name"></span>name<span class="tag"></span>=<span></span>"saytxt"<span class="tag"></span> <span class="tag-name"></span>id<span class="tag"> </span>=<span></span>「saytxt」</li>
<li class="alt">
<span></span>クラス<span class="tag"></span> =<span class="tag-name"></span>"入力"<span></span> <span class="attribute"></span>行<span></span>=<span class="attribute-value"></span>"2" <span></span> <span class="attribute"></span>cols<span></span>=<span class="attribute-value"></span>"40"<span></span>><span class="attribute"></span><span> </span>テキストエリア<span class="attribute-value"></span>><span></span> <span class="attribute"></span>p<span class="attribute-value"></span>><span></span> <span class="attribute"></span> <span></span>input<span class="tag"></span> <span class="tag"></span>type<span class="tag-name"></span>=<span class="tag"></span>"画像" <span></span> </li>
<li>src<span></span>=<span class="tag"></span>"images/btn. gif" <span class="tag-name"></span><span class="tag"></span>class<span></span>=</li>
<li class="alt">" sub_btn"<span></span><span class="tag"></span>alt<span class="tag-name"></span>=<span></span>"post"<span class="attribute"></span> <span></span>/><span class="attribute-value"></span> <span></span>span<span class="attribute"></span> <span></span>id <span class="attribute-value"></span>=<span></span> "msg"<span class="attribute"></span> ><span></span><span class="attribute-value"></span>span<span></span>><span class="attribute"></span> <span></span><span class="attribute-value"> </span><span>フォーム</span><span class="tag">></span><span> </span>
</li>
<li><span><span class="tag">div</span><span class="tag-name"> </span><span> class</span><span class="attribute">=</span><span>"クリア"</span><span class="attribute-value">></span><span class="tag"></span><span class="tag">div</span><span class="tag-name">></span><span class="tag"></span><span></span></span></li>div<li class="alt"> <span></span>id<span class="tag"> </span>=<span class="tag-name"></span>「セイラップ」<span class="tag"></span>&gt ;<span></span> </li>
<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">クラス</span><span>= </span><span class="attribute-value">「saytxt」</span><span class="tag">></span><span> </span></span>
</li>
<li>
<span> </span><span class="tag">&lt ;</span><span class="tag-name">p</span><span class="tag">></span><span class="tag"><span class="tag-name">強い</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>デモ</span><span class="tag"><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">"日付"</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">> 						
<p align="left"></p>
<div style="display:none;">
<span id="url" itemprop="url">http://www.bkjia.com/PHPjc/486081.html</span><span id="indexUrl" itemprop="indexUrl">www.bkjia.com</span><span id="isOriginal" itemprop="isOriginal">tru​​e</span><span id="isBasedOnUrl" itemprop="isBasedOnUrl">http://www.bkjia.com/PHPjc/486081.html</span><span id="genre" itemprop="genre">技術記事</span><span id="description" itemprop="description">このアプリケーションは入力文字数を即座に実行し、Ajax を介して後続の台と通信し、入力を実行します...</span>
</div>
<div class="art_confoot"></div></span>
</li>
</ol>