调用ASP.NET MVC接口填充表格时遭遇JSON.parse语法错误，如何解决？

我来帮你搞定这个SyntaxError: JSON.parse: unexpected character的问题——这种错误几乎都是后端返回的内容不是有效JSON导致的，咱们一步步排查解决：

1. 先确认后端接口返回的到底是什么 #

这是最关键的一步，直接打开浏览器开发者工具（按F12），切换到「Network」标签页，刷新页面后找到GetServices的请求，查看「Response」里的内容：

• 如果返回的是HTML（比如错误页面、MVC视图内容），那说明你的后端方法根本没返回JSON；
• 如果返回的是JSON但开头有多余字符（比如空格、奇怪的符号），那就是输出内容不纯净。

后端的GetServices方法必须确保返回JsonResult，示例代码如下：

// ASP.NET MVC 5及更早版本
public JsonResult GetServices()
{
    var services = // 这里写你的数据查询逻辑，比如从数据库获取服务列表
    return Json(services, JsonRequestBehavior.AllowGet); // 允许GET请求获取JSON
}

// ASP.NET Core版本
[HttpGet] // 必须标记HttpGet特性
public IActionResult GetServices()
{
    var services = // 数据查询逻辑
    return Json(services);
}

⚠️ 注意：别让方法返回View()或PartialView()，那会输出HTML，肯定导致JSON解析失败。

2. 优化前端$.get的调用配置 #

$.get默认会根据响应的Content-Type自动解析数据，但如果后端没正确设置Content-Type: application/json，jQuery可能不会自动解析，导致你拿到的是原始字符串而非JSON对象。

你可以显式指定dataType: 'json'，强制jQuery按JSON解析：

$(document).ready(function () {
    var url = '@Html.Action("GetServices")';
    // 空data参数可以省略，或者写成{}
    $.get(url, function (response) {
        $("#tblServices").html("");
        $.each(response, function (i, val) {
            // 注意用val.ServiceID而不是response.ServiceID，val是当前遍历的项
            var row = $('<tr>')
                .append($('<td>').text(val.ServiceID)) // 用text()更安全，避免XSS风险
                .append($('<td>').text(val.ServiceName)) // 替换成你的实际字段
                // 继续添加其他列...
            $("#tblServices").append(row);
        });
    }, 'json'); // 这里指定dataType为json
});

3. 修复前端HTML拼接的语法错误 #

你提供的代码里append($('<...'))明显是截断了，要确保HTML标签正确闭合，比如每个<td>和<tr>都要完整，不然会导致DOM操作异常，间接影响后续逻辑。

4. 处理特殊情况：UTF-8 BOM头 #

如果后端返回的JSON带有UTF-8 BOM头（比如某些编辑器保存的文件自带BOM），jQuery解析时会报错。这种情况可以在前端先清理字符串：

$.get(url, function (rawResponse) {
    // 去掉开头的BOM头
    var cleanedResponse = rawResponse.replace(/^\uFEFF/, '');
    var response = JSON.parse(cleanedResponse);
    // 后续的表格填充逻辑...
});

总的来说，先通过浏览器开发者工具看接口返回的内容，90%的情况都是后端没返回正确的JSON导致的，先把这个问题解决，其他的就好办了。

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