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

本文关键字：数据 模型 Null Ajax 布表单 表单 通过 | 更新日期: 2023-09-27 18:27:57

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

代码如下。我尝试过数据：JSON.stringfy（表单），它产生了一个null模型，而下面的结果是一个具有null数据的模型。

查看

$(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");
    }

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

您的方法存在两个问题。

例如，如果您的模型类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"时，jQueryajax函数将为其数据参数期望一个对象，因此，如果您之前将对象转换为字符串，它将被发送为字符串。基本上，无论您最终为请求选择什么contentType，都不要使用JSON.stringify作为数据参数。

TL；DR：要实现这一点，请使用默认的contentType或根据以下内容显式声明它，并按如下方式传递表单变量：

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