Comment PHP jQuery Ajax Mysql implémente-t-il les compétences function_javascript d'expression d'humeur

La fonction de publication de l'ambiance est implémentée via la technologie php jquery ajax mysql. Laissez-moi d'abord vous expliquer le processus général : la page d'accueil index.html obtient les icônes d'ambiance et les données relatives à l'histogramme via ajax lorsque l'utilisateur clique sur l'une des ambiances. icônes, l'arrière-plan PHP envoie une requête, PHP vérifie le cookie de l'utilisateur (s'il est soumis pour la première fois), puis ajoute 1 au contenu du champ d'humeur correspondant dans la base de données. Après succès, il revient au front-end. page, indique à la page d'accueil que la page d'index a été publiée avec succès et ajuste l'histogramme et les données statistiques.

Veuillez voir le rendu :

html :

En regardant d'abord le HTML, nous plaçons un #msg dans index.html pour afficher les informations sur le résultat de l'opération. #mood est la zone d'opération principale, où ul charge les icônes d'ambiance, les descriptions, les histogrammes et les informations statistiques de manière asynchrone via javascript.

Copier le code Le code est le suivant :

PHP
Tout d'abord, nous configurons les informations de connexion à la base de données et les paramètres liés aux exemples dans le fichier de configuration 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;

Ensuite, nous allons diviser mood.php en deux parties. En recevant les paramètres d'action, nous pouvons le diviser en la première partie : exprimer l'humeur, et la deuxième partie : obtenir des informations liées à l'humeur.

Copier le code Le code est le suivant :

include_once("config.php");
$action = $_GET['action'];
if($action=='send'){ //Exprimez votre humeur
...
}else{ //Mettez votre humeur
...
>

Partie 1 : Exprimez votre humeur.
Les utilisateurs soumettent les paramètres d'humeur via la publication depuis le front-end, y compris l'identifiant de l'article et l'identifiant de l'humeur. Vérifiez d'abord si l'article existe, puis vérifiez si l'utilisateur a publié une humeur à propos de cet article, puis exploitez la base de données, définissez la valeur du champ d'humeur correspondante sur 1, calculez la hauteur de l'histogramme correspondant à l'humeur actuelle et renvoyez-la. au front-end js pour la réception.

$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; //数据出错
}

Pour vérifier si l'utilisateur a posté une humeur, nous utilisons la fonction chk_mood() pour déterminer si le cookie correspondant de l'utilisateur existe.

//验证是否提交过
function chk_mood($id){
 $cookie = $_COOKIE['mood'.$id];
 if($cookie){
 $doit = 1;
 }else{
 $doit = 0;
 }
 return $doit;
}

Partie 2 : Mettez-vous de bonne humeur
En obtenant les données d'humeur correspondant à l'article ou à l'ID de publication dans le tableau de données, la valeur correspondant à chaque humeur est obtenue (qui peut être comprise comme le nombre de fois que l'humeur est publiée), et la hauteur de l'histogramme est calculée, et la valeur, le nom, l'icône et les informations de hauteur sont construites dans un tableau et finalement renvoyées au frontal sous forme de données au format JSON.

$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

Nous utilisons le puissant jQuery pour effectuer toutes les actions interactives ajax dans cet exemple, la bibliothèque jquery.js doit donc être chargée en premier dans index.html Actuellement, la version 1.8 a été publiée. Vous pouvez accéder au site officiel <🎜. >http: //jquery.com/Télécharger. Ensuite, nous envoyons une requête Ajax à mood.php pour obtenir les informations de la liste d'humeur et les afficher dans la page 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 = "<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列表中
  }); 
 }
 }
 });
 ...
});

De cette façon, après avoir accédé à index.html, la page chargera la liste d'ambiance. Bien sûr, si vous voulez voir l'effet d'arrangement final, vous avez également besoin de CSS. Cet article n'explique pas le CSS pertinent. téléchargez le code source ou consultez la démo pour en savoir plus.

Ensuite, nous avons une action interactive. Lorsque vous cliquez sur l'icône d'ambiance correspondante, l'icône est marquée comme publiée, la hauteur de l'histogramme change et le nombre ci-dessus passe à 1, indiquant que la publication est réussie si vous continuez. cliquez sur l'icône d'ambiance, il vous sera demandé qu'il a été publié. Une fois publié, il ne peut pas être soumis à nouveau. Veuillez consulter le 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);
 }
 });
});

Si vous ne le comprenez pas, vous pouvez télécharger le code source et l'étudier attentivement. Cliquez sur le bouton Télécharger au début de l'article pour télécharger. Enfin, la structure de la table de données MySQL requise pour cet exemple est jointe. vous pour votre attention.

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