Die Funktion zum Posten der Stimmung wird durch die PHP-JQuery-Ajax-MySQL-Technologie implementiert. Lassen Sie mich zunächst den allgemeinen Prozess erläutern: Die Seite index.html erhält Stimmungssymbole und Histogramm-bezogene Daten über Ajax Symbole, das Hintergrund-PHP sendet eine Anfrage, PHP überprüft das Benutzer-Cookie (ob es zum ersten Mal gesendet wird) und fügt dann 1 zum entsprechenden Stimmungsfeldinhalt in der Datenbank hinzu. Nach Erfolg kehrt es zum Front-End zurück Seite, teilt der Homepage mit, dass die Indexseite erfolgreich veröffentlicht wurde, und passt das Histogramm und die statistischen Daten an.
Bitte sehen Sie sich die Darstellung an:
html:
Wenn wir uns zunächst den HTML-Code ansehen, platzieren wir eine #msg in index.html, um die Operationsergebnisinformationen anzuzeigen. #mood ist der Hauptoperationsbereich, in den ul Stimmungssymbole, Beschreibungen, Histogramme und statistische Informationen asynchron über Javascript lädt.
PHP
Zuerst konfigurieren wir die Datenbankverbindungsinformationen und beispielbezogenen Parameter in der Konfigurationsdatei 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;
Als nächstes teilen wir „mood.php“ in zwei Teile auf. Durch den Empfang der Aktionsparameter können wir es in den ersten Teil: Ausdrücken der Stimmung und den zweiten Teil: Erhalten von stimmungsbezogenen Informationen unterteilen.
Teil 1: Drücken Sie Ihre Stimmung aus.
Benutzer übermitteln Stimmungsparameter per Post vom Frontend, einschließlich Artikel-ID und Stimmungs-ID. Überprüfen Sie zunächst, ob der Artikel vorhanden ist, und überprüfen Sie dann, ob der Benutzer eine Stimmung zu diesem Artikel gepostet hat. Betreiben Sie dann die Datenbank, setzen Sie den entsprechenden Stimmungsfeldwert auf 1, berechnen Sie die Höhe des Histogramms, das der aktuellen Stimmung entspricht, und geben Sie sie zurück zum Front-End-JS für den Empfang.
$id = (int)$_POST['id']; //文章或帖子id
$mid = (int)$_POST['moodid']; //心情id（配置文件中提供8种心情）
if(!$mid || !$id){
echo "此链接不存在";exit;
}
$havemood = chk_mood($id); //验证cookie
if($havemood==1){
echo "您已经表达过心情了，保持平常心有益身心健康！";exit;
}
$field = 'mood'.$mid; //数据表中的心情字段，分别用mood0，mood1，mood2...表示不同的心情字段
$query = mysql_query("update mood set ".$field."=".$field."+1 where id=".$id); //对应的心情字段值+1
if($query){
setcookie("mood".$id, $mid.$id, time()+300); //设置cookie，为了测试我们设置cookie过期时间为300s
$query2 = mysql_query("select * from mood where id=$id");
$rs = mysql_fetch_array($query2);//获取该文章的心情数据
$total = $rs['mood0']+$rs['mood1']+$rs['mood2']+$rs['mood3']+$rs['mood4']+$rs['mood5']+
$rs['mood6']+$rs['mood7'];
$height = round(($rs[$field]/$total)*$moodpicheight); //得到总量，并计算当前对应心情的柱状图的高度
echo $height; //返回当前心情柱状的高度
}else{
echo -1; //数据出错
}
Um zu überprüfen, ob der Benutzer eine Stimmung gepostet hat, verwenden wir die Funktion chk_mood(), um festzustellen, ob das entsprechende Cookie des Benutzers vorhanden ist.
//验证是否提交过
function chk_mood($id){
$cookie = $_COOKIE['mood'.$id];
if($cookie){
$doit = 1;
}else{
$doit = 0;
}
return $doit;
}
Teil2: Stimmung machen
Durch Abrufen der Stimmungsdaten, die dem Artikel oder der Beitrags-ID in der Datentabelle entsprechen, wird der Wert erhalten, der jeder Stimmung entspricht (was als die Häufigkeit verstanden werden kann, mit der die Stimmung gepostet wird), und die Höhe des Histogramms wird berechnet. und der Wert, der Name, das Symbol und die Höheninformationen werden in einem Array erstellt und schließlich als Daten im JSON-Format an das Front-End zurückgegeben.
$mname = explode(',',$moodname);//心情说明
$num = count($mname);
$mpic = explode(',',$moodpic);//心情图标
$id = (int)$_GET['id']; //文章或帖子id
$query = mysql_query("select * from mood where id=$id"); //查询对应的心情数据
$rs = mysql_fetch_array($query);
if($rs){
//得到发表心情的总量
$total = $rs['mood0']+$rs['mood1']+$rs['mood2']+$rs['mood3']+$rs['mood4']+
$rs['mood5']+$rs['mood6']+$rs['mood7'];
for($i=0;$i<$num;$i++){
$field = 'mood'.$i; //字段名
$m_val = intval($rs[$field]); //心情对应的值（次数）
$height = 0; //柱图高度
if($total && $m_val){
$height=round(($m_val/$total)*$moodpicheight); //计算高度
}
$arr[] = array(
'mid' => $i, //对应心情id
'mood_name' => $mname[$i], //心情名称
'mood_pic' => $mpic[$i], //图标
'mood_val' => $m_val, //次数
'height' => $height //柱状图高度
);
}
echo json_encode($arr); //返回JSON数据
}
jQuery
In diesem Beispiel verwenden wir die leistungsstarke jQuery, um alle interaktiven Ajax-Aktionen auszuführen. Daher muss zuerst die jquery.js-Bibliothek in index.html geladen werden. Derzeit ist Version 1.8 veröffentlicht >http: //jquery.com/Herunterladen.
Anschließend senden wir eine Ajax-Anfrage an „mood.php“, um die Stimmungslisteninformationen abzurufen und sie auf der Seite „index.html“ anzuzeigen.
$(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 = "<li><span>"+array['mood_val']+"</span><div class="pillar"
style="height:"+array['height']+"px;"></div><div class="face"
rel=""+array['mid']+""><img src="images/"+array['mood_pic']+"">
<br/>"+array['mood_name']+"</div></li>";
$("#mood ul").append(str); //将数据加入到#mood ul列表中
});
}
}
});
...
});
Als nächstes führen wir eine interaktive Aktion durch. Wenn Sie auf das entsprechende Stimmungssymbol klicken, wird das Symbol als veröffentlicht markiert, die Höhe des Histogramms ändert sich und die Zahl oben ändert sich auf 1, was anzeigt, dass die Veröffentlichung erfolgreich war Klicken Sie auf das Stimmungssymbol. Es wird angezeigt, dass es veröffentlicht wurde. Nach der Veröffentlichung kann es nicht erneut eingereicht werden. Bitte beachten Sie den Code:
$(".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);
}
});
});
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);
