> 백엔드 개발 > PHP 튜토리얼 > 웹사이트 찬성 function_php 기술을 구현하기 위한 PHP용 완전한 프런트엔드 코드

웹사이트 찬성 function_php 기술을 구현하기 위한 PHP용 완전한 프런트엔드 코드

WBOY
풀어 주다: 2016-05-16 20:10:39
원래의
1195명이 탐색했습니다.

많은 웹사이트에서는 현재 웹페이지의 콘텐츠에 대한 사용자 만족도 피드백을 표시하기 위해 좋아요 및 싫어요 기능을 지원합니다. 아래에는 사용자 참조를 위해 이 사이트에서 사용되는 좋아요 및 싫어요 기능의 전체 프런트엔드 구현 코드가 나와 있습니다.

전체 프런트엔드 코드에는 html, css, js 부분에 대한 코드가 포함되어 있습니다. 완전한 찬성 기능을 구현하려면 다음 프런트엔드 코드와 직접 구현할 수 있는 백엔드 코드를 사용하세요.

프런트엔드 HTML 코드:

<div 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>
</div>
로그인 후 복사

프런트엔드 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.jb51.net/static/image/dig.gif");
}

#bury {
  background: url("http://www.jb51.net/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 코드를 직접 변경할 수 있습니다.

백그라운드 코드의 대략적인 구현은 다음과 같습니다. 먼저 사용자가 쿠키 또는 데이터베이스 데이터를 기반으로 투표했는지 확인합니다. 사용자가 이전에 투표한 경우 투표 작업이 성공하면 성공이 반환됩니다. 투표가 실패하거나 오류가 반환되거나 기타 오류 메시지가 나타납니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿