如果使用 GET 方法，AJAX 请求无法将 DateTime 传递给服务器答案

【问题标题】：AJAX request cannot pass DateTime to server if using GET method如果使用 GET 方法，AJAX 请求无法将 DateTime 传递给服务器
【发布时间】：2016-10-11 05:00:48
【问题描述】：

我有一个使用 Kendo 控件的表单，当用户单击按钮时，收集这些控件值的 AJAX 请求将发送到服务器并根据这些条件下载文件。其中一个控件是 DateTimePicker。

$.ajax({
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    url: '@Url.Action("MyGenerateReportMethod")',
    async: true,
    data: getViewModel(),
    ...
});


function getViewModel() {
        ...
        viewModel.DateFrom = $("#DateRangeFrom").data("kendoDatePicker").value();
        ...
        return JSON.stringify({ para: viewModel });
}

public ActionResult MyGenerateReportMethod(MyModel para)
{
   try{
       ...
   }
}

public class MyModel
{ 
    public DateTime? DateFrom { get; set; }
}

上面的简化代码演示了我的情况。

我有一个对服务器的 POST ajax 请求，它传递一个包含 Kendo DateTimePicker 值的序列化 JSON 对象。

服务器端操作尝试将此 JSON 对象作为参数捕获并执行与此问题无关的事情。

我的问题是，出于某种原因，我必须将请求从 POST 更改为 GET。虽然它使用 POST 方法工作，但如果我将“POST”更改为“GET”，它就不起作用。

我检查了在 Chrome 的开发者工具中发送的请求，它确实以以下格式发送了 JSON 对象：（在“网络”选项卡的“查询字符串参数”部分）

{"para": {
    ...
    "DateFrom":"2016-04-13T16:00:00.000Z"
    ...
    }
}

但是，在服务器端，MyModel para 似乎没有成功捕获此对象（如果我从“POST”更改为“GET”）。 所有DateTime字段都变为null时，其他字段仍然可以绑定。

为什么会发生这种情况，如何将请求从“POST”更改为“GET”？谢谢。

已编辑

根据一些cmets/answers，我尝试将AJAX请求修改为以下代码，但还是不行...（行为相同）

$.ajax({
            type: 'GET',
            url: '@Url.Action("SumbitOutstandingReportList")',
            data: getPlanViewModel(),
            async: true,
 ...
}

function getPlanViewModel(){
    var obj = {};
    ...
    obj.DateFrom = $("#DateRangeFrom").data("kendoDatePicker").value();
    ...
    return { para: obj };
}

【问题讨论】：

删除contentType 选项并且不对数据进行字符串化（GET 请求中没有正文） - 只需使用data: { DateFrom: $("#DateRangeFrom").data("kendoDatePicker").value() },
感谢您的回答，我试过了，但还是不行……
对我来说非常好。
@StephenMuecke 我已经在 OP 中更新了我的代码，你能看到我错过了什么吗？
它只是你的getPlanViewModel()函数中的return obj;（不是return { para: obj };）

标签： javascript jquery asp.net-mvc kendo-ui

【解决方案1】：

GET 没有正文，因此删除 contentType: "application/json; charset=utf-8", 选项（没有害处，但它仅适用于 POST）并调整数据以便 ajax 调用是

$.ajax({
    type: 'Get',
    url: '@Url.Action("MyGenerateReportMethod")',
    data: getViewModel(),
    ...
});

function getViewModel() {
    var obj = {};
    ...
    obj.DateFrom = $("#DateRangeFrom").data("kendoDatePicker").value();
    ...
    return obj; // return the object, not a stringified object containing another object
}

请注意，这假定该值采用与您的服务器文化相匹配的格式，或采用 ISO 格式（例如，请求将是 DateFrom: '2016-04-13T16:00:00.000Z'）

【讨论】：

【解决方案2】：

这是因为，GET方法是在header或url中传递数据，而json数据不能通过header，改变传递数据的方法，目前是json格式。

你甚至可以这样做：

var fd = new FormData();

fd.append('data', yourData);

并将 fd 作为直接数据对象发送，它将起作用。

【讨论】：

【解决方案3】：

GET 请求没有正文，它在 cookie 或 URL 查询字符串中传递参数，因此在查询字符串参数中传递您想要的数据，如下所示：

var url = @Url.Action("MyGenerateReportMethod",new {DateFrom="_X_"});
url = url.replace("_X_",$("#DateRangeFrom").data("kendoDatePicker").value());

$.ajax({
    type: 'GET',
    url: url,
    async: true
});

【讨论】：