使用 serializeJSON 从 HTML 表单格式化 JavaScript 对象

Question

我在将数据从我的 HTML 表单中取出并转换为我要发送到的服务器所需的正确 JSON 格式时遇到了一些问题。我已经尝试按照我找到的将数据提取和格式化为 JavaScript 对象的指南进行操作，但我无法获得与我需要发送的内容相匹配的输出。

我已经能够获得我需要的问题键以及它的正确值，但无法添加正确的标签。

电流输出：

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

所需输出：

{
"Key":"Question1",
"Value":"Yes"
 }, {
"Key":"Question2",
"Value":"No"
 }, {
"Key":"Question1",
"Value":"No"
 }, {
 "Key":"Question4",
 "Value":"Female"
 }

（我包含了 serializeJSON 插件的脚本以使 sn-p 工作）

$(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);
};
  
	

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

任何提示或建议将不胜感激。谢谢你。

编辑 - 遵循发送的示例之一后，我的输出结果如下所示：

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

我还修改了我的 sn-p 以反映让我走到这一步的变化。

Answer 1

尝试这样的事情：（不需要那个插件），使用 http://api.jquery.com/serializeArray/

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

如果需要，最后以字符串格式调用 JSON.stringify

Answer 2

首先请注意on* 事件属性已过时。您应该改用不显眼的事件处理程序。此外，在处理表单时，您应该挂钩到form 元素的submit 事件，而不是提交按钮的click。这是出于可访问性目的。

关于您的实际问题，您不需要使用 serializeJSON 插件。 jQuery 自己的serializeArray() 方法可以让您接近所需的数据格式，但是它返回带有name 和value 键的对象数组，而不是由输入本身的名称键入的单个对象。要解决这个问题，您可以遍历数组，如下所示：

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

  $('#survey').on('submit', function(e) {
    e.preventDefault();
    
    var obj = {};
    $(this).serializeArray().forEach(function(arr) {
      obj[arr.name] = arr.value;
    })
    
    console.log(obj);
  });
});

<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>
  <button type="submit">Submit</button>
</form>