简单的 JQuery Ajax 帖子答案

【问题标题】：Simple JQuery Ajax post简单的 JQuery Ajax 帖子
【发布时间】：2012-05-15 03:13:56
【问题描述】：

@foreach (var item in set)
 {
    <li>                               
    <div class="slidera_num">@item.VoteCount</div>
    <div class="slidera_button"><a href="#" id="vote" name="vote" onclick="vote(@item.Id);return false;">vote</a> </div>
    </li>
 }

我有这段代码来制作图像列表，我希望用户点击投票并想要发布一个 ajax 帖子并获取 JSON 请求并在div slidera_num 中显示。下面是 ajax 调用，它确实返回 {"vote":3} 。

function vote(idx) {

        $("#vote").click(function () {
            $.post("/Home/VoteAjax/", { id: idx}, function (result) {
                $(".slidera_num").html(result);
            });
        });
    };

但是，每次我点击投票时，它都会增加 ajax 调用，第三次点击时，它会进行 5 次左右的调用。我遇到的另一个问题是因为所有的 div 都将有 .slidera_num 类，我不希望它们都更新相同的数字。

我该如何解决这个问题？

谢谢。

【问题讨论】：

应该避免重复 id #vote。

标签： jquery ajax json asp.net-mvc-3 jquery-selectors

【解决方案1】：

我看到其他答案包含重复项。要仅更新特定结果，而不是使用 *$(".slidera_num").html(result);*，请使用：

$("#vote").click(function () {
    var thisLink = $(this);
    $.post("/Home/VoteAjax/", { id: idx}, function (result) {
        $(thisLink).closest("li").find(".slidera_num").html(result);
    });
});

编辑 -- 已更正。在 $.post 中，this 并不引用 click 元素，因此您必须事先保存对它的引用 (thisLink)。从那里，遍历父 li，然后返回到目标“.slidera_num”。

【讨论】：

item.closest(".slidera_num").html(response.vote); 我有这个代码并且没有更新 div

【解决方案2】：

您正在使用单击事件将单击事件绑定到按钮。

改为这样做：

function vote(idx) {

        $.post("/Home/VoteAjax/", { id: idx}, function (result) {
            $(".slidera_num").html(result);
        });
};

你不需要使用jquery来绑定点击事件。

【讨论】：

【解决方案3】：

在您的代码中，您将 a 标签的 ID 指定为循环中的“投票”。因此，来自该循环的所有元素都将具有相同的 ID。 元素的 ID 应该是唯一的。所以我会像这样重写你的代码

@foreach (var item in set)
 {
    <li>                               
    <div class="slidera_num">@item.VoteCount</div>
    <div class="slidera_button"><a href="#" id="@item.Id" name="vote" >vote</a> </div>
    </li>
 }

脚本是

$(function(){
  $("div.slidera_button a").click(function(e){
  var item=$(this);
  e.preventDefault();
  $.post('@Url.Action("Vote","Ajax")', { id :item.attr("id") } ,function(response){
     item.closest(".slidera_num").html(response);
  });
});

我没有对路径进行硬编码，而是使用HTML helper method 来生成该操作方法的路径。所以我不必担心在我的 URL 中输入多少 ../。

【讨论】：

感谢您的回复，我收到一个关于 URL.Action 行的异常抱怨。 { id :item.attr("id") VS 对此有所抱怨。

【解决方案4】：

您有重复的 id #vote，但 ID 应该是唯一的 并删除 onClick。

function vote(idx) {

        $('div.slidera_button a[name="vote"]').on('click',function (e) {
            e.preventDefault();
            var to = $(this);
            $.post("/Home/VoteAjax/", { id: idx}, function (result) {
                to.parent().prev('.slidera_button').html(result);
            });
        });
    };

【讨论】：

【解决方案5】：

从您的 html 中删除 onclick="vote(@item.Id);return false;" 并在 javascript 代码中的某处调用您的 vote() 函数。

使用 onclick html 属性是老派的，不再正确（尽管有效）。

【讨论】：