The complete front-end code for php to implement website upvoting function, php front-end

The complete front-end code for php to implement website upvoting function, php front-end_PHP tutorial

WBOY

Release： 2016-07-13 09:46:13

Original

1095 people have browsed it

php complete front-end code to implement website thumbs up function, PHP front end

Many websites support thumbs up and thumbs down functions to display users’ satisfaction feedback on the content of the current web page. Below we give the complete front-end implementation code of the like and dislike functions used on this site for user reference.

The complete front-end code includes codes for html, css, and js parts. Use the following front-end code, plus the back-end code that you can simply implement by yourself, to achieve a complete upvote function.

Front-end html code:

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

Copy after login

Front-end css code:

#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.bkjia.com/static/image/dig.gif");
}

#bury {
  background: url("http://www.bkjia.com/static/image/bury.gif");
}

.vote-num {
  display: inline-block;
  font-size: 14px;
  margin-top: 32px;
  color: white;
}

Copy after login

Front-end js code, the code here is based on 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("由于系统或网络问题，投票没有成功，建议您稍后重新投票!");        
      }
    });
  });

Copy after login

You can change the js code yourself according to the needs of the background.

The rough implementation of the background code is: first determine whether the user has voted based on cookie or database data. If the user has voted before, done is returned; if the voting operation is successful, success is returned; if the vote fails, error is returned. or other error messages.

The above is the entire content of this article, I hope you all like it.