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

Question

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

这是我的代码：

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 
        });

所以我想绑定这些＆＃39;服务＆＃39;到网址所以当我发布到我可以的方法 在ViewModel中查看它们.viewModel具有名为：

的成员

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

所以我想要的结果是看到控制器方法中图片中的服务：

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

1

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

2

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

Answer 1

如果你需要继续使用jQuery方法https://docs.python.org/2/library/base64.html，你需要改变构建 params 以通过ajax发送的方式：

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 $.param。

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

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

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

第二种方法基于使用contentType and processData和方法附加：

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
 });