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

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

전체 프런트엔드 코드에는 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 코드를 직접 변경할 수 있습니다.

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

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