PHP+jQuery+Ajax+Mysqlで気分表現機能を実現-php手册-php.cn

ホームページ

php教程

php手册

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:51 AM

id nbsp quot

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>

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7499

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

解決策: 組織では PIN を変更する必要があります。 Oct 04, 2023 pm 05:45 PM

ログイン画面に「組織から PIN の変更を求められています」というメッセージが表示されます。これは、個人のデバイスを制御できる組織ベースのアカウント設定を使用しているコンピューターで PIN の有効期限の制限に達した場合に発生します。ただし、個人アカウントを使用して Windows をセットアップした場合、エラーメッセージは表示されないのが理想的です。常にそうとは限りませんが。エラーが発生したほとんどのユーザーは、個人アカウントを使用して報告します。私の組織が Windows 11 で PIN を変更するように要求するのはなぜですか?アカウントが組織に関連付けられている可能性があるため、主なアプローチはこれを確認することです。ドメイン管理者に問い合わせると解決できます。さらに、ローカルポリシー設定が間違っていたり、レジストリキーが間違っていたりすると、エラーが発生する可能性があります。今すぐ

Windows 11 でウィンドウの境界線の設定を調整する方法: 色とサイズを変更する Sep 22, 2023 am 11:37 AM

Windows 11 では、新鮮でエレガントなデザインが前面に押し出されており、最新のインターフェイスにより、ウィンドウの境界線などの細部をカスタマイズして変更することができます。このガイドでは、Windows オペレーティングシステムで自分のスタイルを反映した環境を作成するのに役立つ手順について説明します。ウィンドウの境界線の設定を変更するにはどうすればよいですか? + を押して設定アプリを開きます。 Windows [個人用設定] に移動し、[色の設定] をクリックします。ウィンドウの境界線の色の変更設定ウィンドウ 11" width="643" height="500" > [タイトルバーとウィンドウの境界線にアクセントカラーを表示する] オプションを見つけて、その横にあるスイッチを切り替えます。 [スタート] メニューとタスクバーにアクセントカラーを表示するにはスタートメニューとタスクバーにテーマの色を表示するには、[スタートメニューとタスクバーにテーマを表示] をオンにします。

この Apple ID は iTunes Store でまだ使用されていません: 修正 Jun 10, 2024 pm 05:42 PM

AppleIDを使用してiTunesStoreにログインすると、「このAppleIDはiTunesStoreで使用されていません」というエラーが画面に表示される場合があります。心配するようなエラーメッセージはありません。これらのソリューションセットに従って問題を修正できます。解決策 1 – 配送先住所を変更する iTunes Store にこのプロンプトが表示される主な理由は、AppleID プロファイルに正しい住所がないことです。ステップ 1 – まず、iPhone で iPhone 設定を開きます。ステップ 2 – AppleID は他のすべての設定の最上位にある必要があります。それで、開けてください。ステップ 3 – そこに到達したら、「支払いと配送」オプションを開きます。ステップ 4 – Face ID を使用してアクセスを確認します。ステップ

Windows 11でタイトルバーの色を変更するにはどうすればよいですか? Sep 14, 2023 pm 03:33 PM

デフォルトでは、Windows 11 のタイトルバーの色は、選択したダーク/ライトテーマによって異なります。ただし、任意の色に変更できます。このガイドでは、デスクトップエクスペリエンスを変更し、視覚的に魅力的なものにするためにカスタマイズする 3 つの方法について、段階的な手順を説明します。アクティブなウィンドウと非アクティブなウィンドウのタイトルバーの色を変更することはできますか?はい、設定アプリを使用してアクティブなウィンドウのタイトルバーの色を変更したり、レジストリエディターを使用して非アクティブなウィンドウのタイトルバーの色を変更したりできます。これらの手順を学習するには、次のセクションに進んでください。 Windows 11でタイトルバーの色を変更するにはどうすればよいですか? 1. 設定アプリを使用して + を押して設定ウィンドウを開きます。 Windows「個人用設定」に進み、

イベントビューアでのイベント ID 55、50、98、140 のディスクエラーを修正 Mar 19, 2024 am 09:43 AM

Windows 11/10 のイベントビューアーでイベント ID 55、50、140、または 98 が表示された場合、またはディスクファイルシステム構造が破損しているため使用できないというエラーが発生した場合は、次のガイドに従って問題を解決してください。イベント 55、ディスク上のファイルシステム構造が壊れていて使用できないとはどういう意味ですか?セッション 55 では、Ntfs ディスク上のファイルシステム構造が破損しており、使用できません。ボリューム上で chkMSK ユーティリティを実行してください。NTFS がトランザクションログにデータを書き込むことができない場合、イベント ID 55 のエラーがトリガーされ、NTFS はトランザクションデータを書き込むことができず操作を完了できません。このエラーは通常、ディスク上に不良セクタが存在するか、ディスクサブシステムのファイルシステムが不十分なために、ファイルシステムが破損した場合に発生します。

Windows 11/10修復におけるOOBELANGUAGEエラーの問題 Jul 16, 2023 pm 03:29 PM

Windows インストーラーページに「問題が発生しました」というメッセージとともに「OOBELANGUAGE」というメッセージが表示されますか?このようなエラーが原因で Windows のインストールが停止することがあります。 OOBE とは、すぐに使えるエクスペリエンスを意味します。エラーメッセージが示すように、これは OOBE 言語の選択に関連する問題です。心配する必要はありません。OOBE 画面自体から気の利いたレジストリ編集を行うことで、この問題を解決できます。クイックフィックス – 1. OOBE アプリの下部にある [再試行] ボタンをクリックします。これにより、問題が発生することなくプロセスが続行されます。 2. 電源ボタンを使用してシステムを強制的にシャットダウンします。システムの再起動後、OOBE が続行されます。 3. システムをインターネットから切断します。 OOBE のすべての側面をオフラインモードで完了する

Windows 11 でタスクバーのサムネイルプレビューを有効または無効にする方法 Sep 15, 2023 pm 03:57 PM

タスクバーのサムネイルは楽しい場合もありますが、気が散ったり煩わしい場合もあります。この領域にマウスを移動する頻度を考えると、重要なウィンドウを誤って閉じてしまったことが何度かある可能性があります。もう 1 つの欠点は、より多くのシステムリソースを使用することです。そのため、リソース効率を高める方法を探している場合は、それを無効にする方法を説明します。ただし、ハードウェアの仕様が対応可能で、プレビューが気に入った場合は、有効にすることができます。 Windows 11でタスクバーのサムネイルプレビューを有効にする方法は? 1. 設定アプリを使用してキーをタップし、[設定] をクリックします。 Windows では、「システム」をクリックし、「バージョン情報」を選択します。「システムの詳細設定」をクリックします。 [詳細設定] タブに移動し、[パフォーマンス] の下の [設定] を選択します。「視覚効果」を選択します

Windows 11 でのディスプレイスケーリングガイド Sep 19, 2023 pm 06:45 PM

Windows 11 のディスプレイスケーリングに関しては、好みが人それぞれ異なります。大きなアイコンを好む人もいれば、小さなアイコンを好む人もいます。ただし、適切なスケーリングが重要であることには誰もが同意します。フォントのスケーリングが不十分であったり、画像が過度にスケーリングされたりすると、作業中の生産性が大幅に低下する可能性があるため、システムの機能を最大限に活用するためにカスタマイズする方法を知る必要があります。カスタムズームの利点: これは、画面上のテキストを読むのが難しい人にとって便利な機能です。一度に画面上でより多くの情報を確認できるようになります。特定のモニターおよびアプリケーションにのみ適用するカスタム拡張プロファイルを作成できます。ローエンドハードウェアのパフォーマンスの向上に役立ちます。画面上の内容をより詳細に制御できるようになります。 Windows 11の使用方法

See all articles

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

HTML

PHP

jQuery

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック