javascript - 以 JSON 格式提交表单数据

Question

我必须重新创建一个最初使用 Jotform 创建的表单 - 它是 here 。我在一个领域苦苦挣扎。这是一个非常简单的表单，唯一需要注意的是能够从多个条目中复制表单字段。这部分可以看here 。当表单重复时，我需要将表单数据作为 JSON 数组提交。在 fiddle 中，我没有放置常规表单字段，以下是它们和克隆字段需要如何提交数据。

q2_fullName[first]:test
q2_fullName[last]:test
q1_currentCommission1:[{"Instruments":"a","Commissions":"1","Margins":"a"},{"Instruments":"b","Commissions":"2","Margins":"b"},{"Instruments":"c","Commissions":"3","Margins":"c"}]

通常在我的 $.ajax 处理程序中，我只是序列化数据，但这在为克隆字段创建 json 数组时不起作用。通常是这样的:

submitHandler: function(form) {
  var dataString = $(form).serialize(); 
  $.ajax({
    type:'POST',
    url: form.action,
    data: dataString,
    dataType: "json",
    beforeSend: function(data){
     //before send
    },
    success: function(data){
      //success function
    }
  });
  return false;
},

我需要以某种方式序列化非克隆字段(我认为)并从克隆值中创建一个 json 数组并为它们分配一个键名称

Answer 1

您可以像这样构建帖子数据和 json 字符串:

var data = {
      // get/set the firstname etc
      "q2_fullName":{
          "first":"", // get firstname ie $("#first_2").val(),
          "last":"" 
      },
      "q1_currentCommission1" :""
    },
    commisions = [];

$('.InsContain').each(function() {
  var $inputs = $(this).find('input');
  commisions.push({
    "Instruments" : $inputs.eq(0).val(),
    "Commissions" : $inputs.eq(1).val(),
    "Margins" : $inputs.eq(2).val()
  });
});
data.q1_currentCommission1 = JSON.stringify(commisions);

发布数据:

q2_fullName[first]:aaa
q2_fullName[last]:123
q1_currentCommission1:[{"Instruments":"1","Commissions":"1","Margins":"1"}]

更新 fiddle here