如何将HTML表单数据转换为服务器要求的指定JSON格式？

我在提取HTML表单数据并转换为服务器要求的JSON格式时遇到了问题。目前已经能获取到每个问题对应的键和值，但无法组织成服务器需要的结构。

当前输出： #

{"Question1":"Yes", "Question2":"No", "Question3":"1", "Question4":"Female"}

服务器要求的输出格式： #

[
  {"Key":"Question1", "Value":"Yes"},
  {"Key":"Question2", "Value":"No"},
  {"Key":"Question3", "Value":"1"},
  {"Key":"Question4", "Value":"Female"}
]

我尝试使用serializeJSON插件后，得到的输出还是不符合要求：

{"0":{"Key":"QuestionKey1","Value":"Yes"},"1": {"Key":"QuestionKey2","Value":"No"},"2": {"Key":"QuestionKey3","Value":"1"},"3": {"Key":"QuestionKey4","Value":"Male"},"length":4}

以下是我的相关代码：

JavaScript代码：

$(function(){ 
  var $select = $(".1-100"); 
  for (i=1;i<=100;i++){ 
    $select.append($('<option></option>').val(i).html(i)) 
  } 
}); 

function submitForm () { 
  var result = []; 
  $.each($('form').serializeArray(), function(i,field){ 
    result.push({"Key": field.name, "Value":field.value}) 
  }); 
  var formData = JSON.stringify($(result)); 
  console.log(formData); 
};

HTML代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="survey" method="post">
  <div class="form-group">
    <div class="col-sm-3 selectContainer">
      <label class="control-label" >First Question</label>
      <select class="form-control" name="QuestionKey1">
        <option name="Value" value="Yes" selected>Yes</option>
        <option name="Value" value="No">No</option>
      </select>
    </div>
    <div class="col-sm-3 selectContainer">
      <label class="control-label">Second Question</label>
      <select class="form-control" name="QuestionKey2">
        <option name="Value" value="Yes">Yes</option>
        <option name="Value" value="No" selected>No</option>
      </select>
    </div>
    <div class="col-sm-2 selectContainer">
      <label class="control-label">Third Question</label>
      <select class="form-control 1-100" id="age" name="QuestionKey3"></select>
    </div>
    <div class="col-sm-2">
      <label class="control-label">Fourth Question</label>
      <label class="radio-inline">
        <input type="radio" name="QuestionKey4" value="Female" />Female
      </label>
      <label class="radio-inline">
        <input type="radio" name="QuestionKey4" value="Male" />Male
      </label>
    </div>
  </div>
  <input value="Submit" type="button" onclick="submitForm()">
</form>

恳请各位提供解决建议，谢谢！

嘿，你的问题其实出在一个很小的细节上！看你的submitForm函数最后一行：JSON.stringify($(result))——你把已经整理好的数组result用$(result)包装成了jQuery对象，这就导致序列化出来的是jQuery对象的内部结构，而不是你想要的纯数组格式。

只需要把这一行改成JSON.stringify(result)就搞定了！

修改后的完整JavaScript代码： #

$(function(){ 
  var $select = $(".1-100"); 
  for (i=1;i<=100;i++){ 
    $select.append($('<option></option>').val(i).html(i)) 
  } 
}); 

function submitForm () { 
  var result = []; 
  $.each($('form').serializeArray(), function(i,field){ 
    // 如果服务器要求Key是Question1而不是QuestionKey1，这里可以加个replace处理
    // 比如：field.name.replace('Key', '')
    result.push({"Key": field.name, "Value":field.value}) 
  }); 
  // 直接序列化数组，不要用jQuery包装！
  var formData = JSON.stringify(result); 
  console.log(formData); 
};

额外说明： #

1. $('form').serializeArray()已经帮你把表单数据转成了包含name和value的对象数组，这一步没问题。
2. 你遍历这个数组，把每个元素转换成{"Key": "...", "Value": "..."}的结构，这完全符合服务器要求的格式，思路是对的。
3. 唯一的错误就是多了个$(result)，把数组变成了jQuery对象，序列化后自然就不对了。

另外，注意你的表单字段name是QuestionKey1，但服务器示例里是Question1，如果服务器严格要求Key的名称是Question1这种格式，你可以在push的时候对field.name做个替换：

result.push({"Key": field.name.replace('Key', ''), "Value":field.value})

这样就能得到和服务器示例完全一致的输出啦！

内容的提问来源于stack exchange，提问作者Victoria K