素材牛

PHP+jQuery+Ajax+Mysql實現文章閱后心情態度投票功能

 所屬分類:網頁特效,PHP/MySql-Ajax,UI效果/布局

 瀏覽:17227次-  下載:24次-  評論:8次-  發布時間:2016-07-29
PHP+jQuery+Ajax+Mysql實現文章閱后心情態度投票功能
積分說明:注冊即送5牛幣,每天簽到可獲得5牛幣,第三方賬號登陸、注冊直接贈送20牛幣!??? 我要充值???更多積分說明?
素材描述:很多大站里面都有發表心情的功能,通過這個功能可以直觀統計分析文章或帖子的瀏覽者的心情感受數據,也很有意思。今天我們來分析一下文章心情投票功能的原理

詳細介紹

本素材實現投票的流程:通過ajax獲取心情圖標及柱狀圖相關數據,當用戶點擊其中的一個心情圖標時,向PHP后端Ajax.php發送請求,然后將mysql中對應的數據心情字段內容加1,成功后返回前端頁面,并更新柱狀圖和統計數據。

1、HTML部分:

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

#msg為操作提示區域
#mood為投票操作區域
ul為投票數據加載區域

2、PHP部分:

config.php為數據庫、投票圖片文字配置文件

$host="localhost"; 
$db_user="root"; //數據庫用戶名
$db_pass="";  //數據庫用戶密碼
$db_name="scn_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; 

mood.php分兩部分。第一部分:發表心情,第二部分:獲取心情相關信息。
PS:文件內有注釋,可自行下載查看

3、jQuery部分:

向mood.php發送Ajax請求,獲取心情列表信息,并展示在index.html頁面中。

$(function(){ 
    $.ajax({ 
        type: 'GET', //通過get方式發送請求 
        url: 'mood.php', //目標地址 
        cache: false, //不緩存數據,注意文明發表心情的數據是實時的,需將cache設置為false,默認是true 
        data: 'id=1', //參數,對應文章或帖子的id,本例中固定為1,實際應用中是獲取當前文章或帖子的id 
        dataType: 'json', //數據類型為json 
        error: function(){ 
            alert('出錯了!'); 
        }, 
        success: function(json){ //請求成功后 
            if(json){ 
                $.each(json,function(index,array){ //遍歷json數據列 
                    var str = "
  • "+array['mood_val']+"
    +array['height']+"px;\">
    +array['mid']+"\">+array['mood_pic']+"\">
    "
    +array['mood_name']+"
  • "
    ; $("#mood ul").append(str); //將數據加入到#mood ul列表中 }); } } }); ... });

    我們在訪問index.html后,頁面會載入心情列表,當然要想看到最終排列效果。

    接下來,我們有個交互動作,當點擊對應的心情圖標時,圖標被標識為已發表,柱狀圖高度發生變化,并且上面的數字會+1,表示發表成功,如果繼續點擊心情圖標,會提示已經發表過不能重復提交。請看代碼:

    $(".face").live('click',function(){ //偵聽點擊事件 
        var face = $(this); 
        var mid = face.attr("rel"); //對應的心情id 
        var value = face.parent().find("span").html(); 
        var val = parseInt(value)+1; //數字加1 
        //提交post請求 
        $.post("mood.php?action=send",{moodid:mid,id:1},function(data){ 
            if(data>0){ 
                face.prev().css("height",data+"px"); 
                face.parent().find("span").html(val); 
                face.find("img").addClass("selected"); 
                $("#msg").show().html("操作成功").fadeOut(2000); 
            }else{ 
                $("#msg").show().html(data).fadeOut(2000); 
            } 
        }); 
    }); 

    CSS部分這里就不詳細講解,可下載素材后查看

    4、數據庫部分:

    數據庫結構已經打包到附件(demo_02.sql),可直接導入。也可直接執行以下SQL語句

    CREATE TABLE IF NOT EXISTS `demo_01` ( 
      `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 `demo_01` (`id`, `mood0`, `mood1`, `mood2`, `mood3`, `mood4`, `mood5`, `mood6`, `mood7`) 
    VALUES(1, 8, 6, 20, 16, 6, 9, 15, 21); 

    可以了,有什么問題歡迎在下面留言

    討論這個素材(8)回答他人問題或分享使用心得會獎勵牛幣

    huhuachuan
    2016年07月29日

    搜狐好像有這個東西

    回復
    閃閃紅星
    2016年08月05日

    這個用戶體驗比較好

    亡靈法師:確實很好
    回復
    閃閃紅星
    2016年08月15日

    好多地方都能看到這個

    回復
    longlong
    2017年11月22日

    好多地方都能看到這個

    回復
    華夏nan
    2017年12月26日

     感謝分享

    回復
    pluspig
    2018年06月17日

     感謝分享 希望能學到東西

    回復
    藝美科技
    2018年09月14日

    不錯!下載看看!

    回復
     文明上網,理性發言!   ?? 阿里云幸運券,戳我領取
    我的牛幣余額:0 已下載次數:24
    所需牛幣:2 開始下載

    牛幣獲取:可通過簽到、評論、充值、發布素材獲得 ? 牛幣充值

    會員賬號
    會員密碼
    安全驗證
    旧板彩客网