求助：通过JQuery调用Controller实现视频访问计数局部刷新

我希望在不刷新整个页面的情况下更新网站中所有视频元素的访问计数器，仅更新已播放视频的计数值。我已在Controller中编写了AddVisitCount方法，下一步需要编写jQuery函数调用该方法并传入视频ID，获取更新后的计数值并更新页面中的span标签。我不熟悉jQuery，现求助解决问题。

我的Controller代码 #

public JsonResult OnGetAddVisitCount(long id)
{
    var newnumber = _multimediaApplication.AddVisitCount(id);
    return new JsonResult(newnumber);
}

我编写的无法正常工作的jQuery函数 #

function AddCount(id, elementid) {
    $.ajax({
        url: '?handler=AddVisitCount' + '&id=' + id,
        type: "get",
        //data: formData,
        //newdata: document.getElementById(elementid),
        success: function (data) {
            //$('#' + dist).location.reload();
            //get("ReloadCounter", function (data) {
            //    $("ReloadCounter").html(data);
            //});
            //$('#' + elementid).load(location.href + "#" + elementid);
            //let url = "#counter[" + this.attr(id) + "]";
            //$(url ).html("");
            //$(url).reload(location.href + url);
            //$("select #counter[" + id + "]").html("");
            $("#counter['" + id + "']").append('<span style="color:white" id="counter[' + id + ']"><span class="fa fa-eye" aria-hidden="true"></span>' + data + '</span>');
        },
        failure: function (response) {
            alert(response.responseText);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
}

核心问题与页面HTML #

页面中对应视频的span标签ID格式为counter[@item.Id]（例如counter[128]），需要将更新后的计数值更新到该标签中，页面代码如下：

<span style="color:white" id="counter[@item.Id]"><span class="fa fa-eye" aria-hidden="true"></span> @item.VisitCount</span>

错误分析 #

1. 选择器错误：ID包含[]特殊字符，直接用$("#counter['" + id + "']")无法正确匹配元素，需要转义或使用属性选择器
2. 内容更新方式错误：append会重复添加相同的span元素，应该替换现有内容而非追加
3. URL拼接不规范：直接拼接URL参数容易出现编码问题，建议用data参数传递

修正后的jQuery函数 #

function AddCount(id) {
    $.ajax({
        url: '?handler=AddVisitCount',
        type: "GET",
        data: { id: id }, // 用data参数传递ID，避免URL拼接错误
        success: function (newCount) {
            // 正确选择包含[]的ID元素：转义[]或者用属性选择器
            const counterElement = $("#counter\\[" + id + "\\]");
            // 保留图标，仅更新计数值（筛选文本节点替换）
            counterElement.contents().filter(function() {
                return this.nodeType === 3; // 筛选出文本节点
            }).replaceWith(newCount);
            
            // 若结构固定，也可以用更简单的方式重置内容：
            // counterElement.html('<span class="fa fa-eye" aria-hidden="true"></span> ' + newCount);
        },
        error: function (response) {
            console.error('更新计数器失败:', response.responseText);
            alert('更新计数器出错，请稍后重试');
        }
    });
}

调用方式 #

当视频播放事件触发时，直接调用AddCount(视频ID)即可，无需额外传递elementid。例如在视频的play事件中绑定：

// 假设视频元素有class="video-item"，data-video-id存储视频ID
$(".video-item").on("play", function() {
    const videoId = $(this).data("video-id");
    AddCount(videoId);
});

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