請看效果圖：

html：

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

PHP
首先我們在config.php配置文件中，配置數據庫連接信息，以及示例相關參數。
$

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='震驚,不解,憤怒,杯具,無聊,高興,支持,超贊';
//心情圖標文件，用半角逗號隔開(template//Uploads/images/目錄)
$moodpic='a1.gif,a2.gif,a3.gif,a4.gif,a5.gif,a6.gif,a7.gif,a8.gif';
//統計心情柱圖標最大高度
$moodpicheight=80;

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

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

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

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

jQuery

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

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

沒看明白的童鞋可以下載源碼仔細研究，點擊文章開頭的Download按鈕即可下載，最后附上本例所需的mysql數據表結構，謝謝您的關注。

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);

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