PHP+jQuery+Ajax+Mysql如何實現發表心情功能

2024-09-01 08:33:04

字體：大中小

來源：轉載

供稿：網友

這篇文章通過php+jquery+ajax+mysql相結合，實現當用戶瀏覽網站文章或者是論壇帖子后，想表達自己瀏覽后的心情，發表自己的感受，很多網站都提供了用戶發表心情的功能，通過此功能可以很直觀的分析文章或者是論壇對瀏覽者的用戶體驗度

實現發表心情功能通過php+jquery+ajax+mysql技術，大致流程我先給大家理下：主頁index.html頁面通過ajax獲取心情圖標及柱狀圖相關數據，當用戶點擊其中的一個心情圖標時，向后臺php發送請求，php對用戶cookie驗證（是否是首次提交），然后將數據庫對應的心情字段內容加1，成功后返回前端頁面，告訴首頁index頁面發表成功，并調整柱狀圖和統計數據。

請看效果圖：

PHP+jQuery+Ajax+Mysql如何實現發表心情功能

html：

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

復制代碼代碼如下:

		
		<div id="msg"></div>
		    <div id=mood>
		    <ul></ul>
		</div>
		 

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/images/目錄)

$moodpic='a1.gif,a2.gif,a3.gif,a4.gif,a5.gif,a6.gif,a7.gif,a8.gif';

//統計心情柱圖標最大高度

$moodpicheight=80;