将表格数据转换为JSON

我试图将HTML表格中的数据转换为JSON，以便它可以在服务器端相应地进行处理。我可以序列化数据，但结果最好生成不直接链接的独特数据阵列。像：这是我使用的形式：将表格数据转换为JSON

<form id="nameGenderForm"> 
    <table id="nameGenderTable"> 

     <tr> 
      <th >Name</th> 
      <th >Gender</th> 
     </tr> 


      <tr> 
       <td><input type="text" name="studentName"></td> 
       <td> 
        <select name="studentGender"> 
         <option value="male">male</option> 
         <option value="female">female</option> 
        </select> 
       </td> 
      </tr> 

      <tr> 
       <td><input type="text" name="studentName"></td> 
       <td> 
        <select name="studentGender"> 
         <option value="male">male</option> 
         <option value="female">female</option> 
        </select> 
       </td> 
      </tr> 
     </table> 
    <input type="submit" /> 
</form>

序列化数据的脚本是：

$("#nameGenderForm").submit(function(event){ 
    event.preventDefault(); 

    var rawData=$('#nameGenderForm').serializeFormJSON(); 
    var formData=JSON.stringify(rawData); 
    console.log(formData); 
});

serializeFormJSON（）是我通过计算器的几页会后得到：

(function($) { 
$.fn.serializeFormJSON = function() { 
var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name]) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 
})(jQuery);

通过利用所有这些我能得到一个JSON是这样的：

{"studentName":["kenpachi","orihime"],"studentGender":["male","female"]}

我尝试了很多方法让它们以名称性别格式获得，但每种方式都会得到相同的结果。两个不同的阵列。每个人使用表单也没有帮助。有没有办法让名性别阵列中的数据是这样的：

{"studentName":"kenpachi","studentGender":"male"},{"studentName":"orihime","studentGender":"female"}

请指教。

来源

2012-09-26 Rickesh John

Here you go with demo，作出轻微改变下面指出：

环绕在每个表行，并发现输入，文本区域并选择类型的元素，它们序列化，转换为对象，然后推到一个数组。

var o = []; 
    $(this).find('tr').each(function() { 
     var $this = $(this); 
     var $elements = $this.find('input, textarea, select') 
     if ($elements.size() > 0) { 
      var serialized = $elements.serialize(); 
      var item = $.toDictionary(serialized); 
      o.push(item); 
     } 
    });

P.S.添加一个新的函数jQuery库名为toDictionary，所以确保你也包括在你的代码。

$ .toDictionary功能

(function($) { 
    $.extend({ 
     toDictionary: function(query) { 
      var parms = {}; 
      var items = query.split("&"); // split 
      for (var i = 0; i < items.length; i++) { 
       var values = items[i].split("="); 
       var key = decodeURIComponent(values.shift()); 
       var value = values.join("=") 
       parms[key] = decodeURIComponent(value); 
      } 
      return (parms); 
     } 
    }) 
})(jQuery);

来源

2012-09-26 14:14:05

感谢您的回答...非常有帮助.. :) –

欢迎..... :) –

给他们相同的名称，但作为一个数组

例如

name="first[studentName]" and name="first[studentGender]"

那么你的第二个输入

name="second[studentName]" and name="second[studentGender]"

而且，也许serializeArray会有所帮助。

来源

2012-09-26 13:15:13

嘿，感谢您的答复。例如，我使用两个条目。实际上它可能更大。这种方法是否可行？ –

绝对如此。这一切都归结为HTML。 –

我会做类似this jsFiddle的事情 - 也就是说，循环遍历每一行并从输入中收集数据，然后将每个对象推送到结果数组中。

您可能希望在输入上使用class，因为它可能比通过当前非常繁琐的:input[name=xyz]选择器查找要快。

来源

2012-09-26 13:51:21 AKX

很棒的答案...感谢您的回复:) –

将表格数据转换为JSON

回答

相关问题