javascript - 通过 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 
        });

所以我想将这些“服务”绑定(bind)到 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您需要更改构建 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);

并且记得设置为 false contentType and processData在 ajax 调用中。

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

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

您需要将您的对象转换为一对名称/值。

第二种方法是基于使用 FormData和方法追加:

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