PHP jQuery Ajax Mysql은 기분 표현 function_javascript 기술을 어떻게 구현합니까?

무드 게시 기능은 php jquery ajax mysql 기술을 통해 구현됩니다. 먼저 일반적인 프로세스를 설명하겠습니다. 홈페이지 index.html 페이지에서는 사용자가 무드 중 하나를 클릭하면 무드 아이콘과 히스토그램 관련 데이터를 얻습니다. 아이콘, 배경 PHP는 요청을 보내고, PHP는 사용자 쿠키(처음 제출되었는지 여부)를 확인한 다음 데이터베이스의 해당 무드 필드 콘텐츠에 1을 추가하고 성공하면 프런트 엔드로 돌아갑니다. 페이지에서는 색인 페이지가 성공적으로 게시되었음을 홈페이지에 알리고 히스토그램 및 통계 데이터를 조정합니다.

렌더링을 확인하세요:

html:

먼저 HTML을 살펴보면 작업 결과 정보를 표시하기 위해 index.html에 #msg를 배치합니다. #mood는 ul이 자바스크립트를 통해 무드 아이콘, 설명, 히스토그램 및 통계 정보를 비동기적으로 로드하는 주요 작업 영역입니다.

코드 복사 코드는 다음과 같습니다.

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;

다음으로,mood.php를 두 부분으로 나누어 액션 매개변수를 받아 첫 번째 부분인 기분 표현과 두 번째 부분인 기분 관련 정보 획득으로 나눌 수 있습니다.

코드 복사 코드는 다음과 같습니다.

include_once("config.php");
$action = $_GET['action'];
if($action=='send'){ //기분을 표현하세요
...
}else{ //기분전환
...
}

1부: 기분을 표현해보세요.
사용자는 기사 ID와 기분 ID를 포함하여 프런트 엔드에서 게시물을 통해 기분 매개변수를 제출합니다. 먼저 기사가 존재하는지 확인한 후, 사용자가 이 기사에 대한 무드를 게시했는지 확인한 후 데이터베이스를 가동하여 해당 무드 필드 값을 1로 설정하고 현재 무드에 해당하는 히스토그램의 높이를 계산하여 반환한다. 수신을 위해 프론트엔드 js에 .

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

사용자가 기분을 게시했는지 확인하기 위해 chk_mood() 함수를 사용하여 사용자의 해당 쿠키가 존재하는지 확인합니다.

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

2부: 기분 전환
데이터 테이블의 기사 또는 게시물 ID에 해당하는 무드 데이터를 구하여 각 무드에 해당하는 값을 구하고(이는 무드가 게시된 횟수로 이해 가능) 히스토그램의 높이를 계산하고, 값, 이름, 아이콘, 높이 정보는 배열로 구성되어 최종적으로 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

이 예제에서는 강력한 jQuery를 사용하여 모든 ajax 대화형 작업을 완료하므로 jquery.js 라이브러리를 index.html에 먼저 로드해야 합니다. 현재 버전 1.8이 출시되었습니다. http: //jquery.com/다운로드하세요.
그런 다음 무드 목록 정보를 얻고 이를 index.html 페이지에 표시하기 위해 Ajax 요청을 Mood.php에 보냅니다.

$(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列表中
  }); 
 }
 }
 });
 ...
});

이런 식으로 index.html에 접속하면 페이지에 무드 목록이 로드됩니다. 물론 최종 정렬 효과를 보려면 해당 CSS도 필요합니다. 자세히 알아보려면 소스 코드를 다운로드하거나 데모를 시청하세요.
다음으로, 해당 무드 아이콘을 클릭하면 아이콘이 게시됨으로 표시되고, 히스토그램의 높이가 변경되며, 계속하면 게시가 성공했음을 나타내는 숫자가 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);
 }
 });
});

이해가 안 되시는 분들은 소스코드를 다운받아서 자세히 읽어보시면 됩니다. 마지막으로 이 예제에 필요한 mysql 데이터 테이블 구조가 첨부되어 있습니다. 관심을 가져주세요.

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