Bagaimanakah PHP jQuery Ajax Mysql melaksanakan kemahiran function_javascript ekspresi mood

Fungsi pengeposan mood dilaksanakan melalui php jquery ajax teknologi mysql Izinkan saya menerangkan proses umum terlebih dahulu: halaman utama index.html mendapatkan ikon mood dan data berkaitan histogram melalui ajax ikon, PHP latar belakang menghantar permintaan, PHP mengesahkan kuki pengguna (sama ada ia diserahkan buat kali pertama), dan kemudian menambah 1 pada kandungan medan mood yang sepadan dalam pangkalan data Selepas berjaya, ia kembali ke bahagian hadapan halaman, memberitahu halaman utama bahawa halaman indeks telah berjaya diterbitkan, dan melaraskan histogram dan data statistik.

Sila lihat pemaparan:

html:

Melihat HTML dahulu, kami meletakkan #msg dalam index.html untuk memaparkan maklumat hasil operasi #mood ialah kawasan operasi utama, di mana ul memuatkan ikon mood, penerangan, histogram dan maklumat statistik secara tidak segerak melalui javascript.

Salin kod Kod adalah seperti berikut:

84a52845ddb00cf095527ca5a7b110e716b28748ea4df4d9c2150843fecfba68
37300cdfbcba660d793359b1648cc278
ff6d136ddc5fdfeffaf53ff6ee95f185929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68

PHP
Mula-mula, kami mengkonfigurasi maklumat sambungan pangkalan data dan parameter yang berkaitan dengan contoh dalam fail konfigurasi 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;

Seterusnya, kita akan membahagikan mood.php kepada dua bahagian Dengan menerima parameter tindakan, kita boleh membahagikannya kepada bahagian pertama: menyatakan perasaan, dan bahagian kedua: mendapatkan maklumat berkaitan mood.

Salin kod Kod adalah seperti berikut:

include_once("config.php");
$action = $_GET['action'];
if($action=='send'){ //Luahkan perasaan anda
...
}lain{ //Dapatkan mood
...
}

Bahagian1: Luahkan perasaan anda.
Pengguna menyerahkan parameter mood melalui siaran dari bahagian hadapan, termasuk id artikel dan id mood. Mula-mula sahkan sama ada artikel itu wujud, kemudian sahkan sama ada pengguna telah menyiarkan mood tentang artikel ini, kemudian kendalikan pangkalan data, tetapkan nilai medan mood yang sepadan kepada 1, dan kira ketinggian histogram yang sepadan dengan mood semasa, dan kembalikannya. ke js bahagian hadapan untuk penerimaan .

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

Untuk mengesahkan sama ada pengguna telah menyiarkan mood, kami menggunakan fungsi chk_mood() untuk menentukan sama ada kuki sepadan pengguna wujud.

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

Bahagian2: Dapatkan mood
Dengan mendapatkan data mood yang sepadan dengan ID artikel atau pos dalam jadual data, nilai yang sepadan dengan setiap mood diperolehi (yang boleh difahami sebagai bilangan kali mood disiarkan), dan ketinggian histogram dikira, dan nilai, nama, ikon dan Maklumat ketinggian dibina ke dalam tatasusunan, dan akhirnya dikembalikan ke bahagian hadapan sebagai data 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

Kami menggunakan jQuery yang berkuasa untuk menyelesaikan semua tindakan interaktif ajax dalam contoh ini, jadi perpustakaan jquery.js mesti dimuatkan terlebih dahulu dalam index.html Pada masa ini, versi 1.8 telah dikeluarkan >http: //jquery.com/Muat turun. Kemudian kami menghantar permintaan Ajax ke mood.php untuk mendapatkan maklumat senarai mood dan memaparkannya dalam halaman 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列表中
  }); 
 }
 }
 });
 ...
});

Dengan cara ini, selepas kami mengakses index.html, halaman akan memuatkan senarai mood, jika anda ingin melihat kesan susunan akhir, anda juga memerlukan CSS yang berkaitan muat turun kod sumber atau lihat demo untuk mengetahui lebih lanjut.

Seterusnya, kami mempunyai tindakan interaktif Apabila ikon mood yang sepadan diklik, ikon ditandakan sebagai diterbitkan, ketinggian histogram berubah dan nombor di atas akan berubah kepada 1, menunjukkan bahawa penerbitan itu berjaya klik ikon mood, ia akan menggesa bahawa ia telah diterbitkan Setelah diterbitkan, ia tidak boleh diserahkan semula. Sila lihat kod:

$(".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);
 }
 });
});

Jika anda tidak memahaminya, anda boleh memuat turun kod sumber dan mengkajinya dengan teliti anda untuk perhatian anda.

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