通过ajax调用将额外的数据添加到序列化表格中

Question

将额外的数据添加到序列化表单字符串时出现问题。 基本上，我有一个表单，其中包含一组称为“服务”的字段，用户可以添加他想要的服务数量。 我通过界面中的按钮动态添加服务输入。 所以我的问题是当我想将它们添加到其他字段（序列化形式）时。 我将这些输入添加到对象数组。 对于示例，我将手动创建它们。

这是我的代码：

var form = mainContainer.find('form');
    var seriliazedForm = form.serialize();
    var url = me.resolveUrl(form[0].action);
    if (url == "XXXX") {
        var services = [];
        services.push({ ServiceId: '1', Service: "paint", Description: 'yellow', Price: '5' });
        services.push({ ServiceId: '2', Service: "paint2", Description: 'yellow', Price: '6' });
        seriliazedForm = seriliazedForm + "&" + $.param({ 'Services': services });
    }

 $.ajax({
            type: auto.ajax.POST,
            url: url,
            data: seriliazedForm 
        });

所以我想将这些``服务''绑定到url，以便在发布到方法时可以在ViewModel中看到它们。viewModel的成员称为：

public List<ServiceViewModel> Services { get; set; }

所以我想要的结果是在controller方法中看到图片中的服务：

我已经尝试过（阅读堆栈中所有可能的解决方案和其他资源），但是没有结果：

1。

var seriliazedForm = seriliazedForm + "&" + $.param({ 'Services': services });

2。

var seriliazedForm = seriliazedForm + "&" + $(services).serializeArray()

Answer 1

如果您需要继续使用jQuery方法$ .param ，则需要更改构建通过ajax发送的params的方式：

var seriliazedForm = form.serializeArray();
seriliazedForm.push({ name: '1', value: JSON.stringify({ServiceId: '1', Service: "paint", Description: 'yellow', Price: '5' })});
seriliazedForm.push({ name: '2', value: JSON.stringify({ServiceId: '2', Service: "paint2", Description: 'yellow', Price: '6'})});
var formData = $.param(seriliazedForm);

并记住在ajax调用中将其设置为false contentType和processData 。

主要变化在于如何向表单数据添加新元素。 因为每个新元素都应采用以下形式：

{name: ...., value:....}

您需要将对象转换为几个名称/值。

第二种方法基于使用FormData和方法append：

var formData = new FormData(form.get(0));
formData.append('ServiceId1', { ServiceId: '1', Service: "paint", Description: 'yellow', Price: '5' });
formData.append('ServiceId2', { ServiceId: '2', Service: "paint2", Description: 'yellow', Price: '6' });

最后，您的ajax调用将如下所示：

$.ajax({
    type: 'POST',
    url: 'z.html',
    data: formData,
    contentType: false,
    processData: false
 });