温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ThinkPHP5中怎么使用jQuery和MySql实现一个投票功能

发布时间:2021-06-30 16:52:55 阅读:161 作者:Leah 栏目:编程语言
亿速云mysql数据库,读写分离,安全稳定,弹性扩容,低至0.3元/天!! 点击查看>>

ThinkPHP5中怎么使用jQuery和MySql实现一个投票功能,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

前端代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基于THINKPHP5实现红蓝投票功能</title>
<style type="text/css">
    .vote{width:288pxheight:300pxmargin:40px auto;position:relative}
    .votetitle{width:100%;height:62pxbackground:url(/static/index/images/icon.png) no-repeat 0 30pxfont-size:15px}
    .red{position:absolute; left:0top:64pxheight:80px;}
    .blue{position:absolute; right:0top:64pxheight:80px;}
    .red p,.blue p{line-height:22px}
    .redhand{position:absolute; left:0;width:36pxheight:36pxbackground:url(/static/index/images/icon.png) no-repeat -1px -38px;cursor:pointer}
    .bluehand{position:absolute; right:0;width:36pxheight:36pxbackground:url(/static/index/images/icon.png) no-repeat -41px -38px;cursor:pointer}
    .grayhand{width:34pxheight:34pxbackground:url(/static/index/images/icon.png) no-repeat -83px -38px;cursor:pointer}
    .redbar{position:absolute; left:42pxmargin-top:8px;}
    .bluebar{position:absolute; right:42pxmargin-top:8px; }
    .redbar span{display:block; height:6pxbackground:red; width:100%;border-radius:4px;}
    .bluebar span{display:block; height:6pxbackground:#09fwidth:100%;border-radius:4pxposition:absolute; right:0}
    .redbar p{line-height:20pxcolor:red;}
    .bluebar p{line-height:20pxcolor:#09ftext-align:rightmargin-top:6px}
</style>
<script type="text/javascript" src="/static/index/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
    // 获取初始数据
    getdata('',1);
    
    $(".redhand").click(function(){
        getdata("red",1);
    });
    $(".bluehand").click(function(){
        getdata("blue",1);
    });
});
function getdata(type,vid){
    $.ajax({
      url"{:url('/index/vote/vote')}",
      data: {type:type,vid:vid},
      type:'POST',
      dataType'json',
      successfunction (res) {
          console.log(res)
          if (res.status == 0) {
              alert('投票成功')
              var w = 208;
            $("#red_num").html(res.msg.rednum);
            $("#red").css("width",res.msg.red_percent*100+"%");
            var red_bar_w = w*res.msg.red_percent-10;
            $("#red_bar").css("width",red_bar_w);
            $("#blue_num").html(res.msg.bluenum);
            $("#blue").css("width",res.msg.blue_percent*100+"%");
            var blue_bar_w = w*res.msg.blue_percent;
            $("#blue_bar").css("width",blue_bar_w);
          }else{
              alert('投票失败');
          }
      }
    });
}
</script>
</head>
<body>
<div id="main">
   <h3 class="top_title"><a href="http://www.jb51.net/article/71504.htm">ThinkPHP5+jQuery+MySql实现红蓝投票功能</a></h3>
   <div class="vote">
        <div class="votetitle">您对Thinkphp5的看法?</div>
        <div class="red" id="red">
            <p>非常实用</p>
            <div class="redhand"></div>
            <div class="redbar" id="red_bar">
                <span></span>
                <p id="red_num"></p>
            </div>
        </div>
        <div class="blue" id="blue">
            <p style="text-align:right">完全不懂</p>
            <div class="bluehand"></div>
            <div class="bluebar" id="blue_bar">
                <span></span>
                <p id="blue_num"></p>
            </div>
        </div>
   </div>
</div>
</body>
</html>

控制器:

<?php
namespace app\index\controller;
use think\Controller;
/**
 * 投票
 */
class Vote extends Controller
{
    /**
     * 首页
     */
    public function index()
    {
        return $this->fetch();
    }
    /**
     * 投票
     * @param vid type ip
     */
    public function Vote()
    {
        $data input('post.');
        if (!empty($data)) {
            $data['ip'] = get_ip();    //获取Ip
            // 先检测当前ip是否已经投过票
            $count model('Vote')->checkIp($data);
            // 检测是否提交了type,提交了即代表点击了按钮,没提交即代表页面初次渲染
            if (!empty($data['type'])) {
                if ($count == '0') {    //当前还未投过票 
                    // 更新票数  添加用户ip表
                    $res model('Vote')->postVote($data);
                    if ($res) {
                        
                        // 投票成功  获取当前各自的票数
                        $info $this->getPercent($data);
                        return return_succ($info);
                    }else{
                        return return_error('投票失败');
                    }
                }else{
                    // 已经投过票
                    return return_error('您已经投过票了');
                }
            }else{
                // 初次渲染,获取初始数据
                $info $this->getPercent($data);
                return return_succ($info);
            }
        }else{
            return return_error('数据不能为空');
        }
    }
    // 计算比例
    public function getPercent($data)
    {
        // 投票成功  获取当前各自的票数
        $info model('Vote')->getInfo($data);
        // 计算比例 保留3位小数
        $info['red_percent'] = round($info['rednum'] / ($info['rednum'] + $info['bluenum']),3);
        $info['blue_percent'] = 1 - $info['red_percent'];
        return $info;
    }
}

模型:

<?php
namespace app\index\model;
use think\Model;
use think\Db;
class Vote extends Model
{
    // 检测当前ip是否已经投过票
    public function checkIp($data)
    {
        $res Db::table('votes_ip')->where(['vid'=>$data['vid'],'ip'=>$data['ip']])->count();
        return $res;
    }
    // 投票
    public function postVote($data)
    {
        $info $this->getInfo($data);
        if ($info) {
            Db::startTrans();
            try {
                
                if ($data['type'] == "red") {
                    // 更新票数表  
                    Db::table('votes')->where(['id'=>$data['vid']])->update(['rednum'=>$info['rednum']+1]);
                }elseif ($data['type'] == "blue") {
                    Db::table('votes')->where(['id'=>$data['vid']])->update(['bluenum'=>$info['bluenum']+1]);
                }
                // 添加用户投票ip
                Db::table('votes_ip')->insert(['vid'=>$data['vid'],'ip'=>$data['ip']]);
                Db::commit();
                return true;
            } catch (Exception $e) {
                Db::rollback();
                return false;
            }
        }
    }
    // 获取当前各自的票数
    public function getInfo($data)
    {
        // 获取各自的票数
        $info Db::table('votes')->where(['id'=>$data['vid']])->find();
        return $info;
    }
}

关于ThinkPHP5中怎么使用jQuery和MySql实现一个投票功能问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

亿速云「云数据库 MySQL」免部署即开即用,比自行安装部署数据库高出1倍以上的性能,双节点冗余防止单节点故障,数据自动定期备份随时恢复。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://www.xuebuyuan.com/3278292.html

AI

开发者交流群×