많은 웹사이트에서는 현재 웹페이지의 콘텐츠에 대한 사용자 만족도 피드백을 표시하는 좋아요 및 싫어요 기능을 지원합니다. 이 기사에서는 주로 웹사이트 추천 기능을 구현하기 위한 PHP의 전체 프런트엔드 코드에 대한 관련 정보를 소개합니다. 그것이 모두에게 도움이 되기를 바랍니다.
아래에서는 사용자 참조를 위해 이 사이트에서 사용되는 좋아요 및 싫어요 기능의 전체 프런트엔드 구현 코드를 제공합니다.
완전한 프런트엔드 코드에는 html, css, js 부분에 대한 코드가 포함되어 있습니다. 완전한 찬성 기능을 구현하려면 다음 프런트엔드 코드와 직접 구현할 수 있는 백엔드 코드를 사용하세요.
프런트엔드 html 코드:
<p id="vote" data_id="文章唯一key"> <span id="dig" class="vote-btn"><span class="vote-num">顶的次数</span></span> <span id="bury" class="vote-btn"><span class="vote-num">踩的次数</span></span> </p>
프런트엔드 CSS 코드:
#vote { /* margin: 0 auto; */ text-align: center; } .vote-btn { margin: 0 20px; display: inline-block; width: 60px; height: 54px; cursor: pointer; } #dig { background: url("http://www.php.cn/static/image/dig.gif"); } #bury { background: url("http://www.php.cn/static/image/bury.gif"); } .vote-num { display: inline-block; font-size: 14px; margin-top: 32px; color: white; }
프런트엔드 js 코드, 여기 코드는 jQuery 구현을 기반으로 합니다.
$("#vote .vote-btn").bind("click", function(){ var me = $(this); var id = me.parent().attr("data_id"); var type = this.id; $.post("请求地址", {'type': type, 'id': id }, function(data){ data = $.trim(data); if(data == 'success'){ //如果投票成功 $num = me.find(".vote-num"); $num.html( parseInt($num.html()) + 1 ); //投票+1 //取消绑定的点击事件,并还原鼠标指针样式 $("#vote .vote-btn").unbind("click").css("cursor", "auto"); if(type == 'bury'){ alert("您投了反对票,敬请在评论中留言告知您的意见,以便于我们改正!"); } }else if(data == 'done'){ //如果已经投票过 //取消绑定的点击事件,并还原鼠标指针样式 $("#vote .vote-btn").unbind("click").css("cursor", "auto"); alert("您已经投票过,无法再次投票!"); }else{ //投票失败 alert("由于系统或网络问题,投票没有成功,建议您稍后重新投票!"); } }); });
배경의 필요에 따라 js 코드를 직접 변경할 수 있습니다.
백그라운드 코드의 대략적인 구현은 다음과 같습니다. 먼저 사용자가 쿠키 또는 데이터베이스 데이터를 기반으로 투표했는지 확인합니다. 사용자가 이전에 투표한 경우 투표 작업이 성공하면 done이 반환됩니다. 실패하면 오류 또는 오류가 반환됩니다.
관련 권장 사항:
ODBC를 사용하여 데이터베이스에 연결하는 PHP의 예
위 내용은 웹 사이트 썸핑 기능을 구현하는 PHP의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!