以JSON形式提交表单数据

时间:2016-05-20 15:03:12

标签: javascript jquery json ajax forms

我必须重新创建一个最初使用Jotform创建的表单 - 它是here。我在一个地区挣扎。这是一个非常简单的形式,唯一需要注意的是能够从多个条目复制表单字段。可以看到那部分here。当表单重复时,我需要将表单数据作为JSON数组提交。在小提琴中,我没有放常规表单字段,这里是他们和克隆字段需要提交数据的方式。

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数组并为它们分配一个键名

1 个答案:

答案 0 :(得分: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"}]

更新小提琴here