請看效果圖：

html：

先看HTML，我們在index.html中放置一個#msg，用來顯示操作結(jié)果信息，#mood是操作主區(qū)域，其中ul通過javascript異步加載心情圖標(biāo)、說明、柱狀圖以及統(tǒng)計信息。
代碼如下:

PHP
首先我們在config.php配置文件中，配置數(shù)據(jù)庫連接信息，以及示例相關(guān)參數(shù)。
$

host="localhost";
$db_user="root";
$db_pass="";
$db_name="demo";
$link=mysql_connect($host,$db_user,$db_pass);
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8");
//心情說明，用半角逗號隔開
$moodname='震驚,不解,憤怒,杯具,無聊,高興,支持,超贊';
//心情圖標(biāo)文件，用半角逗號隔開(template//Uploads/images/目錄)
$moodpic='a1.gif,a2.gif,a3.gif,a4.gif,a5.gif,a6.gif,a7.gif,a8.gif';
//統(tǒng)計心情柱圖標(biāo)最大高度
$moodpicheight=80;

接下來，我們在mood.php中準(zhǔn)備分兩部分，通過接收action參數(shù)，分為第一部分：發(fā)表心情，第二部分：獲取心情相關(guān)信息。
代碼如下:
include_once("config.php");
$action = $_GET['action'];
if($action=='send'){ //發(fā)表心情
...
}else{ //獲取心情
...
}

Part1：發(fā)表心情。
用戶從前端通過post提交發(fā)表心情的參數(shù)，包括文章id，心情id。先驗證文章是否存在，然后再驗證用戶是否已經(jīng)對這篇文章發(fā)表過心情了，接著操作數(shù)據(jù)庫，將對應(yīng)的心情字段值+1，并計算出當(dāng)前心情對應(yīng)的柱狀圖的高度，返回給前端js接收。

驗證用戶是否已發(fā)表過心情，我們通過函數(shù)chk_mood()來判斷用戶對應(yīng)的cookie是否存在。

Part2：獲取心情
通過獲取數(shù)據(jù)表中文章或帖子id對應(yīng)的心情數(shù)據(jù)，得到每種心情對應(yīng)的值（可以理解為發(fā)表心情的次數(shù)），并計算其柱狀圖高度，將每種心情對應(yīng)的值、名稱、圖標(biāo)、高度信息構(gòu)造成數(shù)組，最終以JSON格式數(shù)據(jù)返回給前端。

jQuery

我們使用強(qiáng)大的jQuery來完成本例中所有ajax的交互動作，因此在index.html中要先載入jquery.js庫，目前1.8版本已經(jīng)發(fā)布了哦，可以到官網(wǎng)http://jquery.com/下載。
接著我們向mood.php發(fā)送Ajax請求，獲取心情列表信息，并展示在index.html頁面中。

這樣，我們在訪問index.html后，頁面會載入心情列表，當(dāng)然要想看到最終排列效果，還需要CSS，本文不講解相關(guān)CSS，請下載源碼或查看demo了解。
接下來，我們有個交互動作，當(dāng)點擊對應(yīng)的心情圖標(biāo)時，圖標(biāo)被標(biāo)識為已發(fā)表，柱狀圖高度發(fā)生變化，并且上面的數(shù)字會+1，表示發(fā)表成功，如果繼續(xù)點擊心情圖標(biāo)，會提示已經(jīng)發(fā)表過不能重復(fù)提交。請看代碼：

沒看明白的童鞋可以下載源碼仔細(xì)研究，點擊文章開頭的Download按鈕即可下載，最后附上本例所需的mysql數(shù)據(jù)表結(jié)構(gòu)，謝謝您的關(guān)注。

CREATE TABLE IF NOT EXISTS `mood` (
 `id` int(11) NOT NULL,
 `mood0` int(11) NOT NULL DEFAULT '0',
 `mood1` int(11) NOT NULL DEFAULT '0',
 `mood2` int(11) NOT NULL DEFAULT '0',
 `mood3` int(11) NOT NULL DEFAULT '0',
 `mood4` int(11) NOT NULL DEFAULT '0',
 `mood5` int(11) NOT NULL DEFAULT '0',
 `mood6` int(11) NOT NULL DEFAULT '0',
 `mood7` int(11) NOT NULL DEFAULT '0',
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `mood` (`id`, `mood0`, `mood1`, `mood2`, `mood3`, `mood4`, `mood5`, `mood6`, `mood7`)
VALUES(1, 8, 6, 20, 16, 6, 9, 15, 21);

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com