PHP+jQuery+Ajax+Mysqlで気分表現機能を実現

Web サイトの記事や投稿を閲覧した後は、閲覧後の気分を表現する必要があります。この機能により、記事や投稿を閲覧した人の気分データを直感的に分析できます。この記事では、気分アイコンをクリックして即座に気分を表現する方法を学びます。

http://bbs.php100.com/read-htm-tid-391083-ds-1.html をダウンロード

この記事は、PHP+jQuery+Ajax+Mysqlを組み合わせてユーザーの感情を表現する機能を実現する方法を事例を交えて解説するため、WEBの知識を網羅的に応用した記事となっております。 PHP、Mysql、jQuery、ajax 関連の知識が必要です。

この例の一般的な原理とプロセスは次のとおりです。メイン ページのindex.html は、ajax を介してムード アイコンとヒストグラム関連データを取得し、ユーザーがムード アイコンの 1 つをクリックすると、バックグラウンドの PHP にリクエストが送信され、そのデータが検証されます。ユーザー Cookie を使用して、繰り返しの送信を防ぎ、mysql の対応するデータ ムード フィールドの内容に 1 を追加します。成功したら、フロントエンド ページに戻り、パブリケーションが成功したことを Index.html に伝え、ヒストグラムと統計データを調整します。 。

HTML

まず HTML を見てみましょう。index.html に #msg を配置して、操作結果の情報を表示します。#mood は、ここでムード アイコン、説明、ヒストグラム、統計情報を JavaScript を通じて非同期的に読み込みます。

<code class="html" style="margin: 0px; padding: 0px; "> 
<span class="html__tag_start" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; "><div</span> <span class="html__attr_name" style="margin: 0px; padding: 0px; color: green; ">id</span>=<span class="html__attr_value" style="margin: 0px; padding: 0px; color: maroon; ">"msg"</span><span class="html__tag_start" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">></span><span class="html__tag_end" style="margin: 0px; padding: 0px; color: navy; "></div></span> 
    <span class="html__tag_start" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; "><div</span> id=mood<span class="html__tag_start" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">></span> 
    <span class="html__tag_start" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; "><ul</span><span class="html__tag_start" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">></span><span class="html__tag_end" style="margin: 0px; padding: 0px; color: navy; "></ul></span> 
<span class="html__tag_end" style="margin: 0px; padding: 0px; color: navy; "></div></span> 
</code>

PHP

まず、config.php 構成ファイルでデータベース接続情報とサンプル関連のパラメーターを構成します。

<code class="php" style="margin: 0px; padding: 0px; "> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">host</span>=<span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">"localhost"</span>; 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">db_user</span>=<span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">"root"</span>; 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">db_pass</span>=<span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">""</span>; 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">db_name</span>=<span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">"demo"</span>; 
 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">link</span>=mysql_connect(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">host</span>,<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">db_user</span>,<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">db_pass</span>); 
mysql_select_db(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">db_name</span>,<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">link</span>); 
mysql_query(<span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">"SET names UTF8"</span>); 
 
<span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//心情说明，用半角逗号隔开</span> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">moodname</span>=<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'震惊,不解,愤怒,杯具,无聊,高兴,支持,超赞'</span>; 
<span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//心情图标文件，用半角逗号隔开(template/images/目录)</span> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">moodpic</span>=<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'a1.gif,a2.gif,a3.gif,a4.gif,a5.gif,a6.gif,a7.gif,a8.gif'</span>; 
<span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//统计心情柱图标最大高度</span> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">moodpicheight</span>=<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">80</span>; 
</code>

次に、mood.phpに2つの部分を用意し、アクションのパラメータを受け取ることで、前半部分：気分を表現する部分、後半部分：気分に関する情報を取得する部分に分けます。

<code class="php" style="margin: 0px; padding: 0px; "> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">include_once</span>(<span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">"config.php"</span>); 
 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">action</span> = <span class="php__global" style="margin: 0px; padding: 0px; color: red; ">$_GET</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'action'</span>]; 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">if</span>(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">action</span>==<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'send'</span>){ <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//发表心情</span> 
    ... 
}<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">else</span>{ <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//获取心情</span> 
    ... 
} 
</code>

Part1: あなたの気分を表現します。

用户从前端通过post提交发表心情的参数，包括文章id，心情id。先验证文章是否存在，然后再验证用户是否已经对这篇文章发表过心情了，接着操作数据库，将对应的心情字段值+1，并计算出当前心情对应的柱状图的高度，返回给前端js接收。

<code class="php" style="margin: 0px; padding: 0px; "> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">id</span> = (int)<span class="php__global" style="margin: 0px; padding: 0px; color: red; ">$_POST</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'id'</span>]; <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//文章或帖子id</span> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">mid</span> = (int)<span class="php__global" style="margin: 0px; padding: 0px; color: red; ">$_POST</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'moodid'</span>]; <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//心情id（配置文件中提供8种心情）</span> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">if</span>(!<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">mid</span>  !<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">id</span>){ 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">echo</span> <span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">"此链接不存在"</span>;<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">exit</span>; 
} 
 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">havemood</span> = chk_mood(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">id</span>); <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//验证cookie</span> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">if</span>(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">havemood</span>==<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">1</span>){ 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">echo</span> <span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">"您已经表达过心情了，保持平常心有益身心健康！"</span>;<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">exit</span>; 
} 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">field</span> = <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood'</span>.<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">mid</span>; <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//数据表中的心情字段，分别用mood0，mood1，mood2...表示不同的心情字段</span> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">query</span> = mysql_query(<span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">"update mood set "</span>.<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">field</span>.<span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">"="</span>.<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">field</span>.<span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">"+1 where id="</span>.<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">id</span>); <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//对应的心情字段值+1</span> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">if</span>(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">query</span>){ 
    setcookie(<span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">"mood"</span>.<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">id</span>, <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">mid</span>.<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">id</span>, time()+<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">300</span>); <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//设置cookie，为了测试我们设置cookie过期时间为300s</span> 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">query2</span> = mysql_query(<span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">"select * from mood where id=$id"</span>); 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span> = mysql_fetch_array(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">query2</span>);<span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//获取该文章的心情数据</span> 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">total</span> = <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood0'</span>]+<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood1'</span>]+<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood2'</span>]+<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood3'</span>]+<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood4'</span>]+<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood5'</span>]+ 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood6'</span>]+<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood7'</span>]; 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">height</span> = round((<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">field</span>]/<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">total</span>)*<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">moodpicheight</span>); <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//得到总量，并计算当前对应心情的柱状图的高度</span> 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">echo</span> <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">height</span>; <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//返回当前心情柱状的高度</span> 
}<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">else</span>{ 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">echo</span> -<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">1</span>; <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//数据出错</span> 
} 
</code>

验证用户是否已发表过心情，我们通过函数chk_mood()来判断用户对应的cookie是否存在。

<code class="php" style="margin: 0px; padding: 0px; "> 
<span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//验证是否提交过</span> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">function</span> chk_mood(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">id</span>){ 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">cookie</span> = <span class="php__global" style="margin: 0px; padding: 0px; color: red; ">$_COOKIE</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood'</span>.<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">id</span>]; 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">if</span>(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">cookie</span>){ 
        <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">doit</span> = <span class="php__number" style="margin: 0px; padding: 0px; color: red; ">1</span>; 
    }<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">else</span>{ 
        <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">doit</span> = <span class="php__number" style="margin: 0px; padding: 0px; color: red; ">0</span>; 
    } 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">return</span> <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">doit</span>; 
} 
</code>

Part2：获取心情

通过获取数据表中文章或帖子id对应的心情数据，得到每种心情对应的值（可以理解为发表心情的次数），并计算其柱状图高度，将每种心情对应的值、名称、图标、高度信息构造成数组，最终以JSON格式数据返回给前端。

<code class="php" style="margin: 0px; padding: 0px; "> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">mname</span> = explode(<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">','</span>,<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">moodname</span>);<span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//心情说明</span> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">num</span> = count(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">mname</span>); 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">mpic</span> = explode(<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">','</span>,<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">moodpic</span>);<span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//心情图标</span> 
 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">id</span> = (int)<span class="php__global" style="margin: 0px; padding: 0px; color: red; ">$_GET</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'id'</span>]; <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//文章或帖子id</span> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">query</span> = mysql_query(<span class="php__string2" style="margin: 0px; padding: 0px; color: fuchsia; ">"select * from mood where id=$id"</span>); <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//查询对应的心情数据</span> 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span> = mysql_fetch_array(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">query</span>); 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">if</span>(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>){ 
    <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//得到发表心情的总量</span> 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">total</span> = <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood0'</span>]+<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood1'</span>]+<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood2'</span>]+<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood3'</span>]+<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood4'</span>]+ 
<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood5'</span>]+<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood6'</span>]+<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood7'</span>]; 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">for</span>(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">i</span>=<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">0</span>;<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">i</span><<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">num</span>;<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">i</span>++){ 
        <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">field</span> = <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">&#39;mood&#39;</span>.<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">i</span>; <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//字段名</span> 
        <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">m_val</span> = intval(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">rs</span>[<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">field</span>]); <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//心情对应的值（次数）</span> 
        <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">height</span> = <span class="php__number" style="margin: 0px; padding: 0px; color: red; ">0</span>; <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//柱图高度</span> 
        <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">if</span>(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">total</span> && <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">m_val</span>){ 
            <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">height</span>=round((<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">m_val</span>/<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">total</span>)*<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">moodpicheight</span>); <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//计算高度</span> 
        } 
             
        <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">arr</span>[] = <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">array</span>( 
            <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">&#39;mid&#39;</span> => <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">i</span>, <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//对应心情id</span> 
            <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood_name'</span> => <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">mname</span>[<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">i</span>], <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//心情名称</span> 
            <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood_pic'</span> => <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">mpic</span>[<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">i</span>], <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//图标</span> 
            <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'mood_val'</span> => <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">m_val</span>, <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//次数</span> 
            <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'height'</span> => <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">height</span> <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//柱状图高度</span> 
        ); 
    } 
    <span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">echo</span> json_encode(<span class="php__keyword" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">$</span><span class="php__variable" style="margin: 0px; padding: 0px; color: rgb(64, 64, 194); ">arr</span>); <span class="php__com" style="margin: 0px; padding: 0px; color: green; ">//返回JSON数据</span> 
} 
</code>

jQuery

我们使用强大的jQuery来完成本例中所有ajax的交互动作，因此在index.html中要先载入jquery.js库，目前1.8版本已经发布了哦，可以到官网http://jquery.com/下载。

接着我们向mood.php发送Ajax请求，获取心情列表信息，并展示在index.html页面中。

<code class="js" style="margin: 0px; padding: 0px; "> 
$(<span class="js__operator" style="margin: 0px; padding: 0px; color: rgb(65, 105, 225); font-weight: bold; ">function</span>()<span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">{</span> 
    $.ajax(<span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">{</span> 
        type: <span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">'GET'</span>, <span class="js__sl_comment" style="margin: 0px; padding: 0px; color: green; ">//通过get方式发送请求</span> 
        url: <span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">'mood.php'</span>, <span class="js__sl_comment" style="margin: 0px; padding: 0px; color: green; ">//目标地址</span> 
        cache: false, <span class="js__sl_comment" style="margin: 0px; padding: 0px; color: green; ">//不缓存数据，注意文明发表心情的数据是实时的，需将cache设置为false，默认是true</span> 
        data: <span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">'id=1'</span>, <span class="js__sl_comment" style="margin: 0px; padding: 0px; color: green; ">//参数，对应文章或帖子的id，本例中固定为1，实际应用中是获取当前文章或帖子的id</span> 
        dataType: <span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">'json'</span>, <span class="js__sl_comment" style="margin: 0px; padding: 0px; color: green; ">//数据类型为json</span> 
        error: <span class="js__operator" style="margin: 0px; padding: 0px; color: rgb(65, 105, 225); font-weight: bold; ">function</span>()<span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">{</span> 
            alert(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">'出错了！'</span>); 
        <span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">}</span>, 
        success: <span class="js__operator" style="margin: 0px; padding: 0px; color: rgb(65, 105, 225); font-weight: bold; ">function</span>(json)<span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">{</span> <span class="js__sl_comment" style="margin: 0px; padding: 0px; color: green; ">//请求成功后</span> 
            <span class="js__statement" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">if</span>(json)<span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">{</span> 
                $.each(json,<span class="js__operator" style="margin: 0px; padding: 0px; color: rgb(65, 105, 225); font-weight: bold; ">function</span>(index,array)<span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">{</span> <span class="js__sl_comment" style="margin: 0px; padding: 0px; color: green; ">//遍历json数据列</span> 
                    <span class="js__statement" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">var</span> str = <span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"<li><span>"</span>+array[<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">'mood_val'</span>]+"</span><div class=\"pillar\"  
style=\<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"height:"</span>+array[<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">&#39;height&#39;</span>]+"px;\"></div><div class=\"face\"  
rel=\<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">""</span>+array[<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">&#39;mid&#39;</span>]+<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"\"><img src=\"images/"</span>+array[<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">&#39;mood_pic&#39;</span>]+"\"> 
<br/>"+array['mood_name']+"</div></li>"; 
                    $(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"#mood ul"</span>).append(str); <span class="js__sl_comment" style="margin: 0px; padding: 0px; color: green; ">//将数据加入到#mood ul列表中</span> 
                   <span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">}</span>);  
            <span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">}</span> 
        <span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">}</span> 
    <span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">}</span>); 
    ... 
<span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">}</span>); 
</code>

这样，我们在访问index.html后，页面会载入心情列表，当然要想看到最终排列效果，还需要CSS，本文不讲解相关CSS，请下载源码或查看demo了解。

接下来，我们有个交互动作，当点击对应的心情图标时，图标被标识为已发表，柱状图高度发生变化，并且上面的数字会+1，表示发表成功，如果继续点击心情图标，会提示已经发表过不能重复提交。请看代码：

<code class="js" style="margin: 0px; padding: 0px; "> 
$(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">".face"</span>).live(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">'click'</span>,<span class="js__operator" style="margin: 0px; padding: 0px; color: rgb(65, 105, 225); font-weight: bold; ">function</span>()<span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">{</span> <span class="js__sl_comment" style="margin: 0px; padding: 0px; color: green; ">//侦听点击事件</span> 
    <span class="js__statement" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">var</span> face = $(<span class="js__operator" style="margin: 0px; padding: 0px; color: rgb(65, 105, 225); font-weight: bold; ">this</span>); 
    <span class="js__statement" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">var</span> mid = face.attr(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"rel"</span>); <span class="js__sl_comment" style="margin: 0px; padding: 0px; color: green; ">//对应的心情id</span> 
    <span class="js__statement" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">var</span> value = face.parent().find(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"span"</span>).html(); 
    <span class="js__statement" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">var</span> val = <span class="js__function" style="margin: 0px; padding: 0px; color: olive; ">parseInt</span>(value)+<span class="js__num" style="margin: 0px; padding: 0px; color: red; ">1</span>; <span class="js__sl_comment" style="margin: 0px; padding: 0px; color: green; ">//数字加1</span> 
    <span class="js__sl_comment" style="margin: 0px; padding: 0px; color: green; ">//提交post请求</span> 
    $.post(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"mood.php?action=send"</span>,<span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">{</span>moodid:mid,id:<span class="js__num" style="margin: 0px; padding: 0px; color: red; ">1</span><span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">}</span>,<span class="js__operator" style="margin: 0px; padding: 0px; color: rgb(65, 105, 225); font-weight: bold; ">function</span>(data)<span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">{</span> 
        <span class="js__statement" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">if</span>(data><span class="js__num" style="margin: 0px; padding: 0px; color: red; ">0</span>)<span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">{</span> 
            face.prev().css(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"height"</span>,data+<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"px"</span>); 
            face.parent().find(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"span"</span>).html(val); 
            face.find(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"img"</span>).addClass(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"selected"</span>); 
            $(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"#msg"</span>).show().html(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"操作成功"</span>).fadeOut(<span class="js__num" style="margin: 0px; padding: 0px; color: red; ">2000</span>); 
        <span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">}</span><span class="js__statement" style="margin: 0px; padding: 0px; color: navy; font-weight: bold; ">else</span><span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">{</span> 
            $(<span class="js__string" style="margin: 0px; padding: 0px; color: teal; ">"#msg"</span>).show().html(data).fadeOut(<span class="js__num" style="margin: 0px; padding: 0px; color: red; ">2000</span>); 
        <span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">}</span> 
    <span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">}</span>); 
<span class="js__brace" style="margin: 0px; padding: 0px; color: red; font-weight: bold; ">}</span>); 
</code>

没看明白的童鞋可以下载源码仔细研究，点击文章开头的Download按钮即可下载，最后附上本例所需的mysql数据表结构，谢谢您的关注。

<code class="php" style="margin: 0px; padding: 0px; "> 
CREATE TABLE IF NOT EXISTS `mood` ( 
  `id` int(<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">11</span>) NOT <span class="php__value" style="margin: 0px; padding: 0px; color: gray; font-weight: bold; ">NULL</span>, 
  `mood0` int(<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">11</span>) NOT <span class="php__value" style="margin: 0px; padding: 0px; color: gray; font-weight: bold; ">NULL</span> DEFAULT <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'0'</span>, 
  `mood1` int(<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">11</span>) NOT <span class="php__value" style="margin: 0px; padding: 0px; color: gray; font-weight: bold; ">NULL</span> DEFAULT <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'0'</span>, 
  `mood2` int(<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">11</span>) NOT <span class="php__value" style="margin: 0px; padding: 0px; color: gray; font-weight: bold; ">NULL</span> DEFAULT <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'0'</span>, 
  `mood3` int(<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">11</span>) NOT <span class="php__value" style="margin: 0px; padding: 0px; color: gray; font-weight: bold; ">NULL</span> DEFAULT <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'0'</span>, 
  `mood4` int(<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">11</span>) NOT <span class="php__value" style="margin: 0px; padding: 0px; color: gray; font-weight: bold; ">NULL</span> DEFAULT <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'0'</span>, 
  `mood5` int(<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">11</span>) NOT <span class="php__value" style="margin: 0px; padding: 0px; color: gray; font-weight: bold; ">NULL</span> DEFAULT <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'0'</span>, 
  `mood6` int(<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">11</span>) NOT <span class="php__value" style="margin: 0px; padding: 0px; color: gray; font-weight: bold; ">NULL</span> DEFAULT <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'0'</span>, 
  `mood7` int(<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">11</span>) NOT <span class="php__value" style="margin: 0px; padding: 0px; color: gray; font-weight: bold; ">NULL</span> DEFAULT <span class="php__string1" style="margin: 0px; padding: 0px; color: purple; ">'0'</span>, 
  PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 
 
 
INSERT INTO `mood` (`id`, `mood0`, `mood1`, `mood2`, `mood3`, `mood4`, `mood5`, `mood6`, `mood7`) 
VALUES(<span class="php__number" style="margin: 0px; padding: 0px; color: red; ">1</span>, <span class="php__number" style="margin: 0px; padding: 0px; color: red; ">8</span>, <span class="php__number" style="margin: 0px; padding: 0px; color: red; ">6</span>, <span class="php__number" style="margin: 0px; padding: 0px; color: red; ">20</span>, <span class="php__number" style="margin: 0px; padding: 0px; color: red; ">16</span>, <span class="php__number" style="margin: 0px; padding: 0px; color: red; ">6</span>, <span class="php__number" style="margin: 0px; padding: 0px; color: red; ">9</span>, <span class="php__number" style="margin: 0px; padding: 0px; color: red; ">15</span>, <span class="php__number" style="margin: 0px; padding: 0px; color: red; ">21</span>); </code>