JQuery 序列化表单 - Kendo UI 复制输入

Posted 2023-05-09

【中文标题】JQuery 序列化表单 - Kendo UI 复制输入

【英文标题】：JQuery Serialize Form - Kendo UI Duplicating Inputs

【发布时间】：2016-07-11 02:12:40

【问题描述】：

我正在发布一个表单，并注意到 Kendo UI 在序列化时会与表单字段发生冲突，并在序列化对象中创建一个重复字段。我想知道以前是否有人遇到过这种情况以及是否有解决方案。

假设我想做一个表单的 JQuery AJAX 发布。

$.ajax(
    type: "POST",
    url: "/api/MyController",
    data: formData
);

我可以有这样一个简单的表格。

<form id="myForm">
    <input type="text" name="firstName">
</form>

如果我想序列化我的表单数据（在 formData 变量中使用），我会这样做。

var formData = $('#myForm').serializeArray();

控制台中的输出如下所示。

[Object  name="firstName",  value="John"]

现在的问题。 如果我正在使用 Kendo UI，并且正在从该输入中创建一个下拉菜单或组合框，并尝试序列化表单，则会识别另一个输入（带有下划线的输入）。

[Object  name="firstName_input",  value="John", Object  name="firstName",  value="John"]

如果您不熟悉，Kendo UI 使用简单的输入来创建组合框或下拉菜单，并远程调用 api 获取数据。下面是组合框的创建方式。

var firstNameComboBox= $('#firstName').kendoComboBox(
    placeholder: "Select a Name",
    dataTextField: "Name",
    dataValueField: "ID",
    change: myChangeFunction,      //On change event
    dataSource: 
        type: "json",
        transport: 
            read: 
                dataType: "json",
                url: "/api/MyController/MyAction",
                data:  
            ,
        
    
).data("kendoComboBox");

【问题讨论】：

可以在剑道comboBox创建后添加输入的html吗？

好吧，Kendo 从输入中创建了组合框。它必须首先在那里。它需要一些目标。

是的，你是对的，但是使用 F12 并检查 html。剑道可能会做一些你不知道的事情

是的，看起来 Kendo 正在为组合框创建第二个输入作为“firstName_input”，然后它将原始的显示设置为无。所以我猜序列化正在做它应该做的事情，拾取所有的表单元素，但我希望 Kendo 有办法允许序列化使用它的元素的表单。

您正在发布到 API 控制器，对吗？所以 firstName_input 会被忽略，因为它不是您发布的对象的属性？

【参考方案1】：

免责声明：我在 Telerik/Kendo UI 团队工作

所描述的行为是预期的。基本上，ComboBox 呈现第二个输入元素，其中包含选定的文本。小部件使用以下 "name_input" 格式向该输入元素添加 name 属性。您可能知道，当输入元素具有 name 属性时，它会变为 successful 并且表单会发布它。

这样做有利于服务器平台在出现错误时返回相同的发布页面。这有助于服务器开发人员获取该值并将其作为 ComboBox text 配置选项返回。

我不认为这对使用发布值的开发人员来说是个问题，因为它应该将 POST 有效负载与模型字段/名称相匹配。