我在向序列化表单字符串中添加额外数据时遇到问题。 基本上我有一个表单,其中有一组名为“服务”的字段,用户可以添加他想要的服务数量。我通过界面中的按钮动态添加服务输入。所以我的问题是当我想将它们添加到其他字段(序列化形式)时。我将这些输入添加到对象数组。对于示例,我将手动创建它们。
这是我的代码:
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()
最佳答案
如果需要继续使用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
});
关于javascript - 通过 ajax 调用向序列化表单添加额外数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48103217/