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

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

这是我的密码：

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

二,

---

如果需要继续使用jQuery方法，则需要更改构建通过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

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

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

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

第二种方法基于使用和方法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
 });

---

我尝试了这两种方法，但都没有结果，因为我已经有了一些表单，其中包含输入，当我尝试第一个场景时，他们没有发布到控制器（我添加了内容类型和流程数据）。你能告诉我是否有可能将列表与表单分开发送吗？因为你正在使用post，您确定您正确获取了服务器上的数据吗？我猜你把GET和POST搞混了。无论如何，我建议使用POST，因为查询字符串是有限的。此外，我把你的数组分成两个，你可以考虑把它作为一个元素发送，一个微小的改变。让我知道。Thanks@razi3lbr请看以下内容。

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({
    type: 'POST',
    url: 'z.html',
    data: formData,
    contentType: false,
    processData: false
 });