Form.serialize() 似乎返回 null

Posted 2023-02-22

【中文标题】Form.serialize() 似乎返回 null

【英文标题】：Form.serialize() seems to return null

【发布时间】：2015-09-17 12:21:24

【问题描述】：

我正在尝试将表单发布到控制器，其中控制器接受 FormCollection 作为参数。当我尝试访问 dsCollection 中的项目时，我得到空值。 FormCollection 中的唯一项目是"__RequestVerificationToken" 和"dsCollection"。另一件事是我正在使用 javascript 动态生成表单 html 并同时为它们分配值。

这是我将数据发布到服务器端的 ajax：

$(document).ready(function () 
$('#postEditDatasource').click(function (event) 
    alert(JSON.stringify(deletedDatapoints));
    //serialise and assign json data to hidden field
    $('#dsDeletedDP').val(JSON.stringify(deletedDatapoints));

    //anti forgery token
    //get the form
    var form = $('#__dsAjaxAntiForgeryForm');
    //from the form get the antiforgerytoken
    var token = $('input[name="__RequestVerificationToken"]', form).val();

    var URL = '/Settings/EditDatasource';
    console.log(form);
    //we make an ajax call to the controller on click
    //because the controller has a AntiForgeryToken attribute
    //we need to get the token from the form and pass it with the ajax call.
    $('#__dsAjaxAntiForgeryForm').on('submit', function () 
        $.ajax(
            url: URL,
            data: 
                __RequestVerificationToken: token,
                dsCollection: form.serialize()
            ,
            type: 'POST',
            success: function (result) 
                alert('this worked')
                if (data.result == "Error") 
                    ShowDatasourcePostAlert('failPost', 3000);
                 else 
                    ShowDatasourcePostAlert('successPost', 3000);
                
            ,
            error: function (jqXHR, textStatus, errorThrown) 
                alert(jqXHR + ', ' + textStatus + ', ' + errorThrown);
            
        )
        return false;
    )
);
)

这是我的控制器：

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult EditDatasource(FormCollection dsCollection)
    
        var devName = dsCollection["deviceName"];
            //LoadDataToViewModel();

            //Get the name of the device in which we will pass it to the XML edit helper 
            //In order for us to locate the
            //var getEditDatasource = Convert.ToString((from ds in dsVM.devices
            //                         where ds.deviceID == Convert.ToInt64(dsCollection["dsID"])
            //                         select ds.deviceName));


            return new EmptyResult();
    

这是我的 HTML 的 sn-p，我有太多控件，但它们几乎遵循相同的格式。

    <div class="form-group">
<label class="col-md-2 control-label" for="deviceName">Device Name: </label>
<div class="col-md-10">
<input id="deviceName" class="form-control" type="text" data-val="true" data-val-required="Device name is required" name="deviceName" value="TestName">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="deviceDisplay">Displayed As: </label>
<div class="col-md-10">
<input id="deviceDisplay" class="form-control" type="text" data-val="false" data-val-required="Device name is required" name="deviceDisplay" value="testDisplay">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="deviceDesc">Description: </label>
<div class="col-md-10">
<textarea id="deviceDesc" class="form-control" data-val="false" name="deviceDesc">Test desc</textarea>
</div>
</div>

如果我使用 serializeArray()，它会返回 31 个条目，但条目是 "dsCollection[0][name]" "dsCollection[0][value]"，索引一直上升到 30

【问题讨论】：

你试过了吗：api.jquery.com/serializeArray

你有一行说 console.log(form);这个结果是空的吗？

@Luis.Andrade 不，它不为空

@Johnathon64 是的，发生了一些事情，我不确定是什么，我不是专家，但我会尽力提供帮助。我建议你使用这个 link 助手，因为如果你有一个模型，它会为你编写 ajax 调用，我认为你可以将令牌作为参数发送

【参考方案1】：

serialize 方法将您的 form 字段转换为查询字符串，因此您只需将令牌附加到该字符串而不是创建另一个对象。

如果您今天检查您的请求，您会发现您发布的值如下：

_RequestVerificationToken=token&dsCollection=deviceDesc%3Dcontent1%26deviceDisplay%3Dcontent2

当您拥有标准形式的防伪令牌时，令牌数据会与其他输入数据一起发送（因为实际上它只是一个隐藏的输入），因此正确的发送方式是：

deviceDesc=content1&deviceDisplay=content2&_RequestVerificationToken=token

另一件事是，您的防伪令牌似乎已经在您的 form 中，因此您无需执行任何其他操作，只需 form.serialize。

您可以在您的 javascript 代码中执行以下操作：

data: form.serialize()

【讨论】：

序列化是否还包括隐藏的输入字段？当我单步执行 C# 代码时，它们似乎没有包含在我的集合中