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

Question

我在 Ajax 上为用户 cmets 创建了一个简单的投票系统（+ 和 -）。一页有 50 个已发布的 cmets，您可以为每个“加号”或“减号”投票。这些数据通过 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 调用.

正如我在 cmets 中提到的那样，当这种情况出现时，快速而肮脏的解决方案正在替换：

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

作者：

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

这要归功于unbind 函数，它强制它在每次附加新事件时丢弃以前附加的事件，从而防止它附加多个事件，无论代码处理多少次。

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

Answer 2

$(".vote").each(function () { $(this).click( clickHandler .... 等应该可以解决你的问题。

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;
    });
});