Ajax调用Controller后无法更新页面点赞数的问题

你的问题核心是AJAX回调函数里的this指向发生了变化，导致无法正确定位到要更新的.nbrAdore元素。

在$(".adore2").click()事件里，this确实指向被点击的按钮，但进入$.ajax的success回调后，this的上下文已经变成了AJAX请求的配置对象（不是原来的按钮），所以$(this).parent().parent().siblings().find(".nbrAdore")根本找不到目标元素，自然无法更新数值。

解决方法（三种可选） #

方法1：提前保存this的引用（最兼容的方案）

在click事件里先把按钮的引用存到变量里，比如$btn = $(this)，然后在success里用这个变量来定位元素：

$(document).ready(function(){ 
  $(".adore2").click(function(){ 
    var $btn = $(this); // 保存按钮的jQuery对象
    var aime = $btn.parent().find(".adore1").val(); 
    var value = $btn.parent().parent().siblings().find(".nbrAdore").text(); 
    alert(value); 
    $.ajax({ 
      type:"POST", 
      data: {aime:aime}, 
      url:"acceuilServlet", 
      success:function(result){ 
        alert(result); 
        // 用提前保存的$btn来定位元素，同时改用closest简化DOM层级查找
        $btn.closest(".aimerSection").find(".nbrAdore").html(result); 
      } 
    }); 
  }); 
});

这里把parent().parent()改成closest(".aimerSection")是为了让代码更健壮——就算后续DOM结构微调，只要.aimerSection这个父容器存在，就能正确找到目标元素。

方法2：使用ES6箭头函数（如果项目支持ES6）

箭头函数不会绑定自己的this，会继承外层作用域的this，所以可以直接在回调里使用原来的this：

$(document).ready(function(){ 
  $(".adore2").click(function(){ 
    var aime = $(this).parent().find(".adore1").val(); 
    var value = $(this).parent().parent().siblings().find(".nbrAdore").text(); 
    alert(value); 
    $.ajax({ 
      type:"POST", 
      data: {aime:aime}, 
      url:"acceuilServlet", 
      success:(result) => { // 使用箭头函数
        alert(result); 
        $(this).closest(".aimerSection").find(".nbrAdore").html(result); 
      } 
    }); 
  }); 
});

方法3：在AJAX配置里指定context

jQuery的$.ajax允许通过context参数，直接指定回调函数里的this指向：

$(document).ready(function(){ 
  $(".adore2").click(function(){ 
    var aime = $(this).parent().find(".adore1").val(); 
    var value = $(this).parent().parent().siblings().find(".nbrAdore").text(); 
    alert(value); 
    $.ajax({ 
      type:"POST", 
      data: {aime:aime}, 
      url:"acceuilServlet", 
      context: this, // 指定回调里的this指向当前点击的按钮
      success:function(result){ 
        alert(result); 
        $(this).closest(".aimerSection").find(".nbrAdore").html(result); 
      } 
    }); 
  }); 
});

额外优化建议 #

• 可以给.aimerSection添加数据属性，比如data-post-id="${post.id}"，这样后续定位元素或扩展功能时，能减少对DOM层级的依赖，代码更易维护。
• 请求发起时可以暂时禁用按钮，防止用户重复点击：$btn.prop("disabled", true)，在success或complete回调里再恢复：$btn.prop("disabled", false)。

内容的提问来源于stack exchange，提问作者TaouBen