如何通过fetch向ASP.NET Controller传递正确URL并解决JSON解析报错

DevOps 小满

2026-10-11

问题核心原因

你遇到的Unexpected end of JSON input报错本质是：fetch请求拿到响应后，调用response.json()解析非JSON格式的返回内容失败，通常有两个触发场景：

后台返回的是纯文本、HTML等非JSON格式内容
请求根本没有正确到达控制器，被重定向、拦截后返回了空响应/非JSON响应

修复步骤

1. 修正URL生成逻辑

不要手动拼接查询参数，直接用Url.Action带参数的重载生成标准URL，避免转义、路由规则导致的URL异常，同时HTML的data-*属性统一用短横线命名规范：

<i data-delete-url="@Url.Action("DeleteTag","EditorSections", new { tag = item.Id })" 
   class="bi bi-x-circle-fill w-25 deleteTag">
</i>

2. 修正JS响应解析逻辑

你后台控制器返回的是纯文本"OK"，不是JSON格式，所以要把response.json()改为response.text()，同时补充同域认证凭证、错误捕获逻辑：

document.addEventListener('click', function (e) {
    if (e.target && e.target.classList.contains('deleteTag')) {
        e.stopPropagation(); // 阻止冒泡触发bootstrap下拉菜单默认关闭行为
        const getUrl = e.target.dataset.deleteUrl;
        DeleteTag(getUrl, e.target);
    }
});

function DeleteTag(url, target) {
    fetch(url, {
        credentials: 'same-origin' // 携带同域cookie，避免需要登录的接口被拦截
    })
        .then(response => response.text()) // 解析纯文本返回值
        .then(data => {
            console.log(data);
            if (data.trim() === "OK") {
                // 用closest匹配li，比直接找parentNode更稳妥，不受DOM结构微调影响
                target.closest('li')?.remove();
            }
        })
        .catch(err => console.error('删除请求出错：', err));
    return false;
};