Question

我在Ajax上创建了一个简单的投票系统（+和 - ）供用户评论。一页有50条评论，您可以为每个“加”或“减”投票。此数据通过PHP脚本发送到数据库。但是，如果用户投票，PHP脚本会被调用50次 - 它在Chrome开发人员工具中可见。有错误 - 价值高于预期。这是我的代码（两个DIV按钮和脚本）。

请告诉我如何将代码更改为脚本（up_vote.php或down_vote.php）只调用一次。

<script type="text/javascript" src="raitings/jquery.js"></script>
<script type="text/javascript">$(function() {$(".vote").click(function() {

var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);

if(name=='down')
{
$(this).fadeIn(200).html('<img src="raitings/dot.gif" align="absmiddle">');
$.ajax({type: "POST", url: "raitings/down_vote.php", data: dataString, dataType : "html", cache: false, success: function(html)
   { parent.html(html);}
 });
}
else
{
$(this).fadeIn(200).html('<img src="raitings/dot.gif" align="absmiddle">');
$.ajax({type: "POST", url: "raitings/up_vote.php", data: dataString, dataType : "html", cache: false, success: function(html)
   { parent.html(html);
  }  });
}
return false;
    });
});
</script>

//php code below;
echo "<div class=\"box1\"><div class=\"up\"><a href=\"#\" class=\"vote\" title=\"+ 1\" alt=\"+ 1\" id=".$row["id"]." name=\"up\">".$up."</a></div>"
."<div class=\"down\"><a href=\"#\" class=\"vote\" title=\"- 1\" alt=\"- 1\"  id=".$row["id"]." name=\"down\">".$down."</a></div></div>\n";

Answer 1

使用jQuery，知道事件是可堆叠的很重要，即使事件完全相同也是如此。例如：

$(".vote").click(function() { alert("hi"); });
$(".vote").click(function() { alert("hi"); });
$(".vote").click(function() { alert("hi"); });

如果我们逐字地运行这三行，我们将附加 3个不同的事件。也就是说，通过单击vote类的元素，我们将依次获得3个警报。

此外，通常会发生通过ajax加载的页面带有父页面的相同<script></script>块，在这种情况下，代码无意中被每次ajax调用一次又一次地处理。

虽然我无法准确确定您提供的代码是如何发生的，但似乎这是最可能的情况：您的点击处理程序事件被多次加载，因此一次点击会触发几个ajax调用

正如我在评论中提到的那样，快速而肮脏的解决方案正在取代：

$(".vote").click(function()

人：

$(".vote").unbind("click").click(function()

感谢unbind函数强制它在每次附加新事件时丢弃以前附加的事件，从而防止它无论处理代码多少次都会附加多个事件。

虽然这样可行，但更好的解决方案当然是找到多次加载js代码的位置并确保它只加载一次。

Answer 2

$（＆＃34; .vote＆＃34;）。each（function（）{$（this）.click（clickHandler .... etc应该可以解决你的问题。

Answer 3

我不完全了解您的版本是如何运作的，但我会这样做：

<a href="JavaScript:vote_up(200);"> + </a>
<a href="JavaScript:vote_down(200);"> - </a>

其中200将是评论的唯一ID。然后在JavaScript中定义一个vote_up（）和vote_down（）函数，并在那里添加你的ajax请求。这样，当点击+/-按钮时，它不应该多次调用脚本。

Answer 4

您可以在发送ajax请求之前禁用按钮。

// Sample:

$(function() {
    $(".vote").click(function() {

    var id = $(this).attr("id");
    var name = $(this).attr("name");
    var dataString = 'id='+ id ;
    var parent = $(this);

    parent.fadeIn(200).html('<img src="raitings/dot.gif" align="absmiddle">');

    if(name=='down')
    {   
        $.ajax({
        type: "POST", 
        url: "raitings/down_vote.php", 
        data: dataString, 
        dataType : "html", 
        cache: false, 
        beforeSend: function() {
            parent.attr("disabled", true);
        },
        success: function(html) {
            parent.html(html);
        }
        });
    } else {    
        $.ajax({
        type: "POST", 
        url: "raitings/up_vote.php", 
        data: dataString, 
        dataType : "html", 
        cache: false, 
        beforeSend: function() {
            parent.attr("disabled", true);
        },
        success: function(html) {
            parent.html(html);
        }
        });
    }

    return false;
    });
});

如何防止多个加载PHP脚本调用JS脚本？

4 个答案: