PHP+jQuery+Ajax+Mysql如何實(shí)現(xiàn)發(fā)表心情功能_javascript技巧

請(qǐng)看效果圖：

html：

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

PHP
首先我們?cè)赾onfig.php配置文件中，配置數(shù)據(jù)庫(kù)連接信息，以及示例相關(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");
//心情說(shuō)明，用半角逗號(hào)隔開(kāi)
$moodname='震驚,不解,憤怒,杯具,無(wú)聊,高興,支持,超贊';
//心情圖標(biāo)文件，用半角逗號(hào)隔開(kāi)(template//Uploads/images/目錄)
$moodpic='a1.gif,a2.gif,a3.gif,a4.gif,a5.gif,a6.gif,a7.gif,a8.gif';
//統(tǒng)計(jì)心情柱圖標(biāo)最大高度
$moodpicheight=80;

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

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

驗(yàn)證用戶(hù)是否已發(fā)表過(guò)心情，我們通過(guò)函數(shù)chk_mood()來(lái)判斷用戶(hù)對(duì)應(yīng)的cookie是否存在。

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

jQuery

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

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

沒(méi)看明白的童鞋可以下載源碼仔細(xì)研究，點(diǎn)擊文章開(kāi)頭的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)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com