一个带有 jQuery、PHP 和 Smarty 的投票系统答案

【问题标题】：A voting system with jQuery, PHP and Smarty一个带有 jQuery、PHP 和 Smarty 的投票系统
【发布时间】：2013-05-10 12:17:55
【问题描述】：

我只使用 PHP 和 Smarty 为我的网站添加了投票功能。这是它的 HTML 部分：

<p>{$vote} <a href="vote.php?q_vote=vote_up&question_id={$qid}"><i class="icon-thumbs-up"></i></a> <a href="vote.php?q_vote=vote_down&question_id={$qid}"><i class="icon-thumbs-down"></i></a></p>

代码的 PHP 部分进行投票并刷新同一页面。

我想用 jQuery 做同样的事情，这样它就不需要刷新页面了。这是我在 HTML 中写的：

$("#q_upvote").click(function()
    {
        var vote = "vote_up";
        var votedata = "";
        votedata = "vote= " + vote;
        $.ajax({                 
                type: 'POST',
                url: 'vote.php',
                data: votedata,
                success: function(vote_msg){
                if(msg == 'ok')
                    {
                    //show the new vote 
                    }
                                        else
                                        //show notification
                }
    }
)
</script>

我不知道如何在那里显示新投票。你能帮我解决这个问题吗？如果有人告诉我，如果我走的是正确的道路，我也很感激。

【问题讨论】：

ajax 响应新投票数是什么？
您需要将 php 响应更改为不提供完整页面，而只提供您正在寻找的单条信息。（或者是几条信息的json字符串）。
您在函数 vote_msg 参数中有但您检查 msg 参数更改它。此行数据：votedata，可以更改为数据：“投票=投票”这将简化您的脚本，您不需要这么多变量。当您向 vote.php 提供投票参数时，php 文件会返回什么？
@RobertPodwika 我还没有写那部分，但我认为它应该返回一个 JSON 变量。

标签： php jquery html smarty vote

【解决方案1】：

更正了您的 html 代码，以便您有一个占位符票数。
更正了 Ajax 调用，使其传递与 per 相同的参数您最初的投票锚中的 href。
修复了 ajax 调用中的各种语法错误

HTML 代码

    <p>
       <span class="votenumbers">{$vote}</span> 
       <a id="upvote_{$qid}" class="q_upvote" href="#"><i class="icon-thumbs-up"></i></a> 
       <a href="vote.php?q_vote=vote_down&question_id={$qid}"><i class="icon-thumbs-down</i</a>
   </p>

jQuery 代码

$(".q_upvote").click(function()
    {
        var vote = "vote_up",
            question_id = this.id.split('_')[1], 
            votedata = "q_vote="+vote+"&question_id="+question_id;
        $.ajax({                 
                type: 'POST',
                url: 'vote.php',
                data: votedata,
                success: function(vote_msg){
                   if(vote_msg== 'ok')
                       {
                       //show the new vote
                       $(this).find('.votenumbers').closest().html(parseInt($(this).find('.votenumbers').closest().html())+1) 
                       }
                   else{
                        //show notification
                   }
                }
           });
    }
)

【讨论】：

感谢您的回答。我无法理解这一行：var question_id = this.id.split('_')[1];
在此上下文中，this 指的是已单击的锚点。所以 id(upvote_{$qid}) 是split 由字符_ 组成，然后[1] 采用array(['upvote','{qid}'] 中的第二个元素，由split 函数返回，即$qid。你得玩它自己看看:)
这条线不起作用：$(this).find('.votenumbers').closest().html(parseInt($(this).find('.votenumbers').closest().html())-1)
你可以试试这个$(this).prev().html(parseInt($(this).prev().html)()+)1)

【解决方案2】：

当您知道投票已正确保存时，您可以在客户端增加您的投票，例如：

<script type="text/javascript">
var votes = 0;
$("#myVoteNumberDiv").html(votes);
</script>

在//show the new vote 你会写：

votes++; //or in case he voted down: votes--;
$("#myVoteNumberDiv").html(votes);

如果您的意思不同，请告诉我，我不完全确定我是否正确理解了您的问题。

【讨论】：

他使用juery，你给他纯js :) ?
@RobertPodwika 只是为了展示这个概念；D 但你是对的，我改变了它。
你改变了它，它更糟糕。只需 $("#tag").html(votes) 顺便说一下 --votes 比投票快-- :)