通过 Ajax 发布表单数据会导致 Null 模型数据答案

【问题标题】：Posting form data through Ajax is resulting in Null model data通过 Ajax 发布表单数据会导致 Null 模型数据
【发布时间】：2014-10-27 17:23:32
【问题描述】：

我正在尝试通过 Ajax 请求发布我的表单数据，该数据是模型绑定到控制器的，但是控制器显示数据为空，尽管请求标头显示数据正在发送。

代码如下。我已经尝试过 data: JSON.stringify(form) ，它导致一个空模型，而下面的结果是一个带有空数据的模型。

查看

$(document).on('click', '#saveData', function () {
                    if ($('#form').valid()) {
                        var form = $('#form').serialize();
                        $.ajax(
                            {
                                url: '@Url.Action("CreateClient", "Processors")',
                                type: 'POST',
                                cache: false,
                                async: false,
                                dataType: 'json',
                                contentType: 'application/json',
                                data: JSON.stringify(form)
                        })
                            .success(function (response) 
{ alert(response); })
                            .error(function (response) 
{ alert(response); });
                    }
                });

控制器

public ActionResult CreateClient(ModelData form)
    {
        if (form == null || !ModelState.IsValid)
        {                
            return Json("Error");
        }

        return Json("Success");

    }

【问题讨论】：

标签： c# ajax model-view-controller fluentvalidation

【解决方案1】：

你的方法有两个问题。

如果您的模型类 ModelData 是，例如，

class ModelData {
    public string Foo {get;set;}
    public string Bar {get;set;}
}

要发送的适当数据是 {foo:"foo1", bar:"bar1"}，或者最终是 {Foo:"foo1", Bar: "bar1"}，这取决于您如何配置序列化 - 因为您已指定 contentType 'application/json'。

但是，您正在使用 jquery serialize() 阅读您的表单。此方法以"foo=foo1&bar=bar1" 的形式返回一个字符串，适用于contentType 'application/x-www-form-urlencoded'。因此，您必须决定以何种格式发送数据。如果要继续使用 serialize() 从 DOM 获取数据，请改用'application/x-www-form-urlencoded'。

其次，JSON.stringify() 将从一个对象创建一个 JSON 字符串。字符串也是一个对象。因此，将字符串传递给此函数会将字符串包装在字符串中，这没有多大意义：数据将类似于"\"foo=foo1&bar=bar1\""。以同样的方式，当contentType 是'json' 时，jQuery ajax 函数将期望一个对象作为它的数据参数，所以如果你之前将你的对象转换为一个字符串，它会被这样发送：一个字符串。基本上，无论您最终为请求选择什么 contentType，都不要使用 JSON.stringify 作为您的数据参数。

TL;DR：要使其正常工作，请使用默认的 contentType 或按照下面的方式显式声明它，并按原样传递表单变量：

var form = $('#form').serialize();
$.ajax(
   {
       //(...)
       contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
       data: form,
       //(...)

【讨论】：