从控制器返回 PartialView 时出现 JSON.parse 错误答案

【问题标题】：JSON.parse error upon returning PartialView from controller从控制器返回 PartialView 时出现 JSON.parse 错误
【发布时间】：2017-11-05 14:10:47
【问题描述】：

我有以下 ajax 调用

    $.ajax({
        type: "POST",
        url: url,
        dataType: "json",
        data: { occupants: occupants },
        success: function (data) {
            $("#summaryContent").html(data);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log("Status: " + textStatus);
            console.log("Error: " + errorThrown);
        }
    });

还有一个看起来像这样的控制器

    [HttpPost]
    public PartialViewResult Verification(List<OccupantDto> occupants)
    {
        //do stuff
        return PartialView();
    }

我在我的 ajax 调用中遇到了这个错误

Error: SyntaxError: JSON.parse Error: Invalid character at position:5

我尝试从我的 ajax 调用中删除 dataType: "json"，这消除了错误，并呈现了我的部分视图，但是，在我的控制器中，occupants 是一个空列表。在我的控制器中添加dataType: "json" 会填充occupants，但会引发错误。

【问题讨论】：

哪一行代码给出了错误？
console.log("错误：" + errorThrown);在javascript中
以下 Shyju 的回答告诉您为什么会收到错误以及如何删除它。现在要了解为什么在删除数据类型时会得到空列表，您可以分享在 JavaScript 中填充 occupants 变量的代码吗？您可以尝试对 occupants 变量执行 JSON.Stringify。

标签： c# .net ajax asp.net-mvc

【解决方案1】：

这部分在你的$.ajax 方法调用中

dataType: "json",

告诉 jQuery 你期望来自服务器的结果是一个有效的 json 字符串。因此 jQuery 会尝试将其显式解析为一个 js 对象（使用 JSON.parse() 方法），并假设它是一个有效的 JSON 字符串响应返回，因为 你保证 jQuery 使用dataType: "json" 选项。

但在您的情况下，您返回的是一个视图结果，它只是 HTML 标记。所以它不能被解析为 javascript 对象。如果要解析的字符串不是有效的 JSON，JSON.parse() 将抛出 SyntaxError 异常。这就是您得到的结果，因为 parse 方法调用崩溃了，因此它执行您的 $.ajax 方法的 error 处理程序。

只需删除指定dataType 行的行。这应该工作

$.ajax({
    type: "POST",
    url: url,
    data: { occupants: occupants },
}).done(function (data) {
    $("#summaryContent").html(data);
}).fail(function (XMLHttpRequest, textStatus, errorThrown) {
    console.log("Status: " + textStatus);
    console.log("Error: " + errorThrown);
});

在大多数情况下，您不必指定dataType 属性值。如果未指定任何内容，jQuery 将尝试根据返回的响应的 mime 类型来推断它。

现在，只要您有一个有效的项目数组（与OccupantDto 的结构匹配），您的occupants 参数就会被模型绑定器正确映射，并且不会是空/空集合。

假设OccupantDto 有一个Id 和Name 属性（这是设置表公共属性），这应该可以工作

var occupants = [{ name: "Scott",id:4},{ name: "Shyju",id:6}];
$.ajax({
    type: "POST",
    url: '@Url.Action("Verification")',
    data: { occupants: occupants }
})

从 jQuery 3.0 开始，success()、error() 和 complete() 回调被删除。您可以改用done()、fail() 和always()。

【讨论】：