如何从 ajax 调用中取回我想要的东西？

Question

我正在构建一个 MVC 4 项目，其中显示了一个项目表及其几个状态里程碑。每个里程碑都由一个绿色、黄色或红色的单元格表示。我使用 html 帮助程序构建这些单元格的内容，以使用一些相当复杂的逻辑在彩色背景之上呈现文本内容。我想让用户单击任何单元格并弹出一个 jQuery 对话框，使用局部视图显示与该状态项相关的详细信息。每个单元格都有相同的 css 类，我用它来绑定单击事件，然后向服务器发送 ajax 调用，并传递单元格的 id。控制器方法按预期接收调用，但 ajax 调用失败。 发送视图是使用一个数据模型构建的以填充单元格，当然我需要向部分视图发送不同的数据模型，我不知道不匹配是否是失败的原因，我不认为所以。我正在尝试使用简单数据进行开发以使其正常工作，因此我尝试仅将一个值或一个键/值对作为 Json 发送回，但每种方式都失败了。

这是 js：

$('.statusCell').click(function () {
        var statusId = this.id;
        alert("clicked this status: " + statusId);

        var request = $.ajax({
            url: "/Report/GetStatusData/",
            data: {
                id: statusId
            }

        });

        request.success(function (data) {
            alert("returned ajax data: " + data);
        });
        request.fail(function (jqXHR, textStatus) {
            alert("Request failed: " + textStatus);
        });
});

fail 函数的显示与您在失败时所期望的一样。 这是我尝试过多次返回尝试的控制器代码：

public ActionResult GetStatusData(int id)
{
    return Json(new { prop = id });
    //return PartialView("_displayStatus", id);
}

问题是我真的不知道我需要详细地做什么。我了解一般概念，但不了解实际发生的情况。我过去做过 ajax 调用，但在其中使用带有 Ajax 的 ActionLinks，并将部分视图作为成功目标。这完全不同，以至于我无法理解。 我需要什么才能返回视图，以便我可以将新数据传递到局部视图并加载它？我可以不寄回我需要的任何型号吗？我错过了它需要什么形式？ 我可能会提到我还没有为部分编写代码，因为我想先让它工作。但我不明白为什么没有视图接收新数据很重要，因为我没有将它们映射在一起。 感谢任何人提供的任何帮助。

Answer 1

此时请求超出范围。将成功放在点击事件中。我把它放在ajax调用本身中。在数据下添加

success: function(data){
    alert("returned ajax data: " + data);
}

Answer 2

为了让 JSON 从您的控制器返回到 ajax 调用，必须满足以下几点：

1. 您必须让控制器发送格式正确的 JSON。
2. Ajax 调用必须知道它需要 JSON（或者能够智能地猜测它是 JSON）。

我不确切知道您的 ASP 环境是如何工作的，但您是否 100% 确定您正在创建合法的 JSON 并从控制器发送它？您可以在 Chrome 或 Firefox 调试器的网络选项卡中准确验证发回的内容，它将显示通过网络传输的确切数据。这通常会使正在发生的或可能出现的问题更加清晰。

对于第 2 项，您需要控制器将请求类型设置为 JSON，以便 ajax 调用看到它是 JSON mime 类型，或者您需要在 ajax 调用中指定 dataType。如果可以的话，最好在服务器端解决这个问题，这样它就会自动处理 jQuery ajax 调用。

您可以像这样强制 JSON 数据类型：

$('.statusCell').click(function () {
        var statusId = this.id;
        alert("clicked this status: " + statusId);

        var request = $.ajax({
            url: "/Report/GetStatusData/",
            data: {
                id: statusId
            },
            dataType: "json"
        });

        request.success(function (data) {
            alert("returned ajax data: " + data);
        });
        request.fail(function (jqXHR, textStatus) {
            alert("Request failed: " + textStatus);
        });
});