MVC5 + JQuery 点击按钮重复加载分部视图问题求助

我来帮你搞定这个问题！你遇到的重复加载表格的核心原因很明确，同时还有个小细节可以优化来避免重复请求，具体解决方案如下：

1. 替换内容而非追加（核心修复） #

你当前用的append()方法会把新的分部视图内容追加到容器末尾，这就是每次点击都会多出一张表格的原因。只需要把它换成html()方法，这个方法会先清空容器内的现有内容，再插入新的表格，实现刷新显示的效果。

2. 修正按钮禁用逻辑（避免重复请求） #

原来的代码在发起请求后立刻解除了按钮的禁用状态，这会导致请求还在加载时用户就能再次点击，可能引发重复请求。应该把解除禁用的代码放到请求完成的done回调里，确保只有当表格加载完成后，按钮才会重新可用。

修改后的完整Javascript代码：

<script> 
$("#btnCargarCategorias").click(function () { 
    $(this).prop("disabled", "disabled"); 
    var url = '@Url.Action("CargarCategorias","Categorias")'; 
    $.get(url).done(function (data) { 
        $("#divTabla").html(data); // 替换append为html，实现刷新
        $("#btnCargarCategorias").removeAttr("disabled"); // 请求完成后再启用按钮
    })
    // 可选：添加请求失败的处理
    .fail(function() {
        $("#btnCargarCategorias").removeAttr("disabled");
        $("#divTabla").html("<p>加载分类失败，请稍后重试</p>");
    })
}) 
</script>

关于Ajax的疑问 #

你现在已经在使用Ajax技术了！$.get()就是jQuery封装好的Ajax GET请求，所以不需要额外引入其他Ajax相关技术，调整现有代码的这两处就足够解决问题。

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